Skip to content


Use banner to highlight important information.
  • Alpha
  • Not reviewed for accessibility
This component requires JavaScript to function. Please refer to the Installation section to set it up.

Use Banner to highlight important information.


fullBooleanfalseWhether the component should take up the full width of the screen.
full_when_narrowBooleanfalseWhether the component should take up the full width of the screen when rendered inside smaller viewports.
dismissibleBooleanfalseWhether the component can be dismissed with an "x" button.
descriptionStringnilDescription text rendered underneath the message.
iconSymbolnilThe name of an Octicon icon to use. If no icon is provided, a default one will be chosen based on the scheme.
schemeSymbol:defaultOne of :danger, :default, :success, or :warning.
reappearBooleanfalseWhether or not the flash banner should reappear after being dismissed. Only for use in test and preview environments.
system_argumentsHashN/ASystem arguments



A button or custom content that will render on the right-hand side of the component.

To render a button, call the with_action_button method, which accepts the arguments accepted by Button.

To render custom content, call the with_action_content method and pass a block that returns HTML.



<div style="display: grid; row-gap: 15px">
<%= render( { "This is a banner message!" } %>
<%= render( :warning)) { "This is a warning banner!" } %>
<%= render( :danger)) { "This is a danger banner!" } %>
<%= render( :success)) { "This is a success banner!" } %>

Full width

<%= render( true)) { "This is a full width banner!" } %>


<%= render( true, reappear: true)) { "This is a dismissible banner!" } %>

Custom icon

<%= render( :people)) { "This is a banner with a custom icon!" } %>

With action button

<%= render( do |component| %>
This is a banner with an action button!
<% component.with_action_button(size: :small) { "Take action" } %>
<% end %>

With custom action

<%= render( do |component| %>
Comment saved!
<% component.with_action_content do %>
<%= render( :pencil, mr: 1, "aria-label": "Edit")) %>
<% end %>
<% end %>