Skip to content
Primer
ViewComponents
What's new
Design
Interface guidelinesOcticonsPrototypingPresentationsCommand lineMobile
Development
CSSReactViewComponents
About
Getting started
ContributingSystem arguments
Components
AvatarBlankslateBorderBoxBoxBreadcrumbButtonCounterFlashLabelLayoutLinkOcticonPopoverProgressBarSpinnerStateSubheadTextTimelineItem
GitHub

Flash

Table of contents
Table of contents

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
Edit this page on GitHub