x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<div class="p-8 flex flex-col gap-8"> <div> <p class="text-sm text-theme-6 mb-3"> Default variant — standalone with border and background: </p> <div class="midwest-empty-state variant-default"> <div class="empty-state-inner"> <div class="empty-state-icon"> <div class="midwest-icon "> <div class="midwest-icon-inner"> <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Person"><title>Person</title> <path d="M332.64 64.58C313.18 43.57 286 32 256 32c-30.16 0-57.43 11.5-76.8 32.38-19.58 21.11-29.12 49.8-26.88 80.78C156.76 206.28 203.27 256 256 256s99.16-49.71 103.67-110.82c2.27-30.7-7.33-59.33-27.03-80.6zM432 480H80a31 31 0 01-24.2-11.13c-6.5-7.77-9.12-18.38-7.18-29.11C57.06 392.94 83.4 353.61 124.8 326c36.78-24.51 83.37-38 131.2-38s94.42 13.5 131.2 38c41.4 27.6 67.74 66.93 76.18 113.75 1.94 10.73-.68 21.34-7.18 29.11A31 31 0 01432 480z"></path></svg> </div> </div> </div> <div class="empty-state-content"> <p class="empty-state-title">No Users</p> <div data-controller="midwest-prose" class="midwest-prose prose"> <p>No users have been added yet.</p> </div> </div> </div> </div> </div> <div> <p class="text-sm text-theme-6 mb-3"> Inline variant — no border or background, suitable for embedding inside cards, table cells, etc.: </p> <div class="border border-theme-3 rounded-lg"> <div class="midwest-empty-state variant-inline"> <div class="empty-state-inner"> <div class="empty-state-icon"> <div class="midwest-icon "> <div class="midwest-icon-inner"> <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Person"><title>Person</title> <path d="M332.64 64.58C313.18 43.57 286 32 256 32c-30.16 0-57.43 11.5-76.8 32.38-19.58 21.11-29.12 49.8-26.88 80.78C156.76 206.28 203.27 256 256 256s99.16-49.71 103.67-110.82c2.27-30.7-7.33-59.33-27.03-80.6zM432 480H80a31 31 0 01-24.2-11.13c-6.5-7.77-9.12-18.38-7.18-29.11C57.06 392.94 83.4 353.61 124.8 326c36.78-24.51 83.37-38 131.2-38s94.42 13.5 131.2 38c41.4 27.6 67.74 66.93 76.18 113.75 1.94 10.73-.68 21.34-7.18 29.11A31 31 0 01432 480z"></path></svg> </div> </div> </div> <div class="empty-state-content"> <p class="empty-state-title">No Users</p> <div data-controller="midwest-prose" class="midwest-prose prose"> <p>No users have been added yet.</p> </div> </div> </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
24
25
26
27
<% user_model = Class.new do include Midwest::Iconable icon :person def self.model_name Struct.new(:human, keyword_init: true).new(human: 'User') end end%><div class="p-8 flex flex-col gap-8"> <div> <p class="text-sm text-theme-6 mb-3"> Default variant — standalone with border and background: </p> <%= midwest_empty_state(action_model: user_model) %> </div> <div> <p class="text-sm text-theme-6 mb-3"> Inline variant — no border or background, suitable for embedding inside cards, table cells, etc.: </p> <div class="border border-theme-3 rounded-lg"> <%= midwest_empty_state(action_model: user_model, variant: :inline) %> </div> </div></div>Inline Variant
The :inline variant strips the outer border, background, and padding so
the component can be embedded inside other containers — such as a table
empty-state cell or a card body — without visual double-framing.
No params configured.
No assets to display.
Add a .js or .css file alongside the component to see it here.
Figma embed for Empty State/inline_variant
Annotate a preview to embed its Figma design here:
@figma "https://figma.com/..."