Use the Flash component to inform users of successful or pending actions.
Examples
Variants
<%= render(Primer::FlashComponent.new) { "This is a flash message!" } %>
<%= render(Primer::FlashComponent.new(variant: :warning)) { "This is a warning flash message!" } %>
<%= render(Primer::FlashComponent.new(variant: :danger)) { "This is a danger flash message!" } %>
<%= render(Primer::FlashComponent.new(variant: :success)) { "This is a success flash message!" } %>
Full width
<%= render(Primer::FlashComponent.new(full: true)) { "This is a full width flash message!" } %>
Dismissible
<%= render(Primer::FlashComponent.new(dismissible: true)) { "This is a dismissible flash message!" } %>
Icon
<%= render(Primer::FlashComponent.new(icon: "people")) { "This is a flash message with an icon!" } %>
With actions
<%= render(Primer::FlashComponent.new) do |component| %>
This is a flash message with actions!
<% component.action do %>
<%= render(Primer::ButtonComponent.new(variant: :small)) { "Take action" } %>
<% end %>
<% end %>
Arguments
| Name | Type | Default | Description |
|---|
full | Boolean | false | Whether the component should take up the full width of the screen. |
spacious | Boolean | false | Whether to add margin to the bottom of the component. |
dismissible | Boolean | false | Whether the component can be dismissed with an X button. |
icon | String | nil | Name of Octicon icon to use. |
variant | Symbol | :default | One of :default, :warning, :danger, or :success. |
system_arguments | Hash | N/A | System arguments |
Slots
Action
Optional action content showed on the right side of the component.