Skip to content

Flash

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.slot(:actions) do %>
<%= render(Primer::ButtonComponent.new(variant: :small)) { "Take action" } %>
<% end %>
<% end %>

Arguments

NameTypeDefaultDescription
fullBooleanfalseWhether the component should take up the full width of the screen.
spaciousBooleanfalseWhether to add margin to the bottom of the component.
dismissibleBooleanfalseWhether the component can be dismissed with an X button.
iconStringnilName of Octicon icon to use.
variantSymbol:defaultOne of :default, :warning, :danger, or :success.
system_argumentsHashN/ASystem arguments

actions slot

NameTypeDefaultDescription
system_argumentsHashN/ASystem arguments