x
1
2
3
4
5
6
7
8
9
<div role="status" aria-live="polite" aria-atomic="true" data-controller="midwest-notification" class="midwest-notification theme-primary"> <div class="midwest-notification__body"> <div class="midwest-notification__content"> <div class="midwest-notification__message"> This is a notification message. It can span multiple lines if the content is long enough. </div> </div> </div></div>1
2
3
4
5
6
7
8
9
<%= midwest_notification( state: (params[:state] || 'default').to_sym, title: params[:title].presence, closable: params[:closable] == true, animated: params[:animated] == true, countdown: params[:countdown].presence&.to_i) do %> This is a notification message. It can span multiple lines if the content is long enough.<% end %>Playground
| Param | Description | Input |
|---|---|---|
|
— |
|
|
|
Optional heading above the message |
|
|
|
— |
|
|
|
— |
|
|
|
Auto-dismiss after N seconds |
|
No assets to display.
Add a .js or .css file alongside the component to see it here.
Figma embed for Notification/playground
Annotate a preview to embed its Figma design here:
@figma "https://figma.com/..."