x
1
2
3
4
<div class="flex items-center justify-center p-16"><span class="midwest-badge size-default theme-primary"> <span class="value">Badge</span></span></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<% icon_val = params[:icon].presence&.to_sym %><div class="flex items-center justify-center p-16"> <%= midwest_badge( params[:label].presence || 'Badge', support: params[:support].presence, state: (params[:state] || 'default').to_sym, size: (params[:size] || 'default').to_sym, removable: params[:removable] == true, dot: params[:dot] == true, pulse: params[:pulse] == true, stacked: params[:stacked] == true ) do |c| %> <% if icon_val %> <% c.with_icon { midwest_icon(icon_val) } %> <% end %> <% end %></div>Playground
This example uses dynamic preview parameters which can be edited live in the Lookbook UI
| Param | Description | Input |
|---|---|---|
|
Primary label text |
|
|
|
Secondary supporting text shown alongside the label |
|
|
|
Semantic colour state |
|
|
|
Badge size |
|
|
|
Optional icon shown before the label |
|
|
|
Show a dismiss button that removes the badge |
|
|
|
Render as a small indicator dot (hides label visually) |
|
|
|
Animate an expanding ring around the dot (use with dot: true) |
|
|
|
Stack support above label vertically instead of inline |
|
No assets to display.
Add a .js or .css file alongside the component to see it here.