Use Flash to inform users of successful or pending actions.
Examples
Schemes
This is a flash message!
This is a warning flash message!
This is a danger flash message!
This is a success flash message!
<%= render(Primer::FlashComponent.new) { "This is a flash message!" } %>
<%= render(Primer::FlashComponent.new(scheme: :warning)) { "This is a warning flash message!" } %>
<%= render(Primer::FlashComponent.new(scheme: :danger)) { "This is a danger flash message!" } %>
<%= render(Primer::FlashComponent.new(scheme: :success)) { "This is a success flash message!" } %>
Full width
This is a full width flash message!
<%= render(Primer::FlashComponent.new(full: true)) { "This is a full width flash message!" } %>
Dismissible
This is a dismissible flash message!
<%= render(Primer::FlashComponent.new(dismissible: true)) { "This is a dismissible flash message!" } %>
Icon
This is a flash message with an icon!
<%= render(Primer::FlashComponent.new(icon: :people)) { "This is a flash message with an icon!" } %>
With actions
This is a flash message 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 | Symbol | nil | Name of Octicon icon to use. |
scheme | 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.