Skip to content

Use Flash to inform users of successful or pending actions.

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.
iconSymbolnilName of Octicon icon to use.
schemeSymbol:defaultOne of :danger, :default, :success, or :warning.
system_argumentsHashN/ASystem arguments

Slots

Action

Optional action content showed on the right side of the component.

NameTypeDefaultDescription
system_argumentsHashN/ASystem arguments

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 %>