Midwest Component Library v0.24.0

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
<div class="p-8">
  <div class="midwest-empty-state variant-default">
    <div class="empty-state-inner">
      <div class="empty-state-content">
        <p class="empty-state-title">Nothing here yet</p>
        <div data-controller="midwest-prose" class="midwest-prose prose">
          <p>Nothing has been added here yet.</p>
        </div>
    </div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<%
  post_class = Class.new do
    def self.icon = :document
    def self.model_name
      Struct.new(:human, keyword_init: true).new(human: 'Post')
    end
  end
  resolved_title = params[:title].presence
  use_icon = params[:use_icon] == true
  use_model = params[:use_model] == true
%>
<div class="p-8">
  <%= render Midwest::EmptyStateComponent.new(
    title: resolved_title,
    action_model: (post_class if use_model)
  ) do |c| %>
    <% if use_icon && !use_model %>
      <% c.with_icon(name: 'inbox') %>
    <% end %>
  <% end %>
</div>

Playground

Explore the component with live parameters.

Param Description Input

Override the generated title

Show an icon

Supply an ActionModel with Iconable

No assets to display.
Add a .js or .css file alongside the component to see it here.

Accessibility

Figma embed for Empty State/playground

Annotate a preview to embed its Figma design here:

@figma "https://figma.com/..."