Midwest Component Library v0.24.0

Previews

No matching results.

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
<div class="flex flex-wrap items-center gap-4 p-16">
<span data-controller="midwest-badge" class="midwest-badge has-action size-default theme-cyan">
  <span class="value">Dismissible</span>
  <span class="badge-action">      <button type="button" data-action="midwest-badge#remove" aria-label="Dismiss">
      <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="Close"><title>Close</title>
            <path d="M289.94 256l95-95A24 24 0 00351 127l-95 95-95-95a24 24 0 00-34 34l95 95-95 95a24 24 0 1034 34l95-95 95 95a24 24 0 0034-34z"></path></svg>
        </div>
      </div>
    </button>
  </span>
</span>
<span data-controller="midwest-badge" class="midwest-badge has-action size-default theme-green">
  <span class="value">Editable</span>
  <span class="badge-action">      <button type="button" aria-label="Edit">
      <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="Pencil"><title>Pencil</title>
            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="44" d="M358.62 129.28L86.49 402.08 70 442l39.92-16.49 272.8-272.13-24.1-24.1zM413.07 74.84l-11.79 11.78 24.1 24.1 11.79-11.79a16.51 16.51 0 000-23.34l-.75-.75a16.51 16.51 0 00-23.35 0z"></path></svg>
        </div>
      </div>
    </button>
  </span>
</span>
<span data-controller="midwest-badge" class="midwest-badge has-action size-default theme-orange">
  <span class="value">With Link</span>
  <span class="badge-action">      <button type="button" aria-label="More info">
      <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="Information circle"><title>Information circle</title>
            <path d="M256 56C145.72 56 56 145.72 56 256s89.72 200 200 200 200-89.72 200-200S366.28 56 256 56zm0 82a26 26 0 11-26 26 26 26 0 0126-26zm48 226h-88a16 16 0 010-32h28v-88h-16a16 16 0 010-32h32a16 16 0 0116 16v104h28a16 16 0 010 32z"></path></svg>
        </div>
      </div>
    </button>
  </span>
</span></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
<div class="flex flex-wrap items-center gap-4 p-16">
  <%= render Midwest::BadgeComponent.new('Dismissible', state: :info) do |c| %>
    <% c.with_action do %>
      <button type="button" data-action="midwest-badge#remove" aria-label="Dismiss">
        <%= midwest_icon(:close) %>
      </button>
    <% end %>
  <% end %>
  <%= render Midwest::BadgeComponent.new('Editable', state: :success) do |c| %>
    <% c.with_action do %>
      <button type="button" aria-label="Edit">
        <%= midwest_icon(:pencil) %>
      </button>
    <% end %>
  <% end %>
  <%= render Midwest::BadgeComponent.new('With Link', state: :warning) do |c| %>
    <% c.with_action do %>
      <button type="button" aria-label="More info">
        <%= midwest_icon(:'information-circle') %>
      </button>
    <% end %>
  <% end %>
</div>

Action Slot

Use the action slot to render custom interactive content (buttons, links, icons) inside the badge — ideal for dismissible tags with custom behaviour or inline edit/info actions.

No params configured.

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

Accessibility

Figma embed for Badge/action_slot

Annotate a preview to embed its Figma design here:

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