Banner

Use banner to highlight important information.

Alpha
Not reviewed for accessibility

On this page

This component requires JavaScript to function. Please refer to the Installation section to set it up.

Use Banner to highlight important information.

Arguments

Name	Type	Default	Description
`full`	`Boolean`	`false`	Whether the component should take up the full width of the screen.
`full_when_narrow`	`Boolean`	`false`	Whether the component should take up the full width of the screen when rendered inside smaller viewports.
`dismissible`	`Boolean`	`false`	Whether the component can be dismissed with an "x" button.
`description`	`String`	`nil`	Description text rendered underneath the message.
`icon`	`Symbol`	`nil`	The name of an Octicon icon to use. If no icon is provided, a default one will be chosen based on the scheme.
`scheme`	`Symbol`	`:default`	One of `:danger`, `:default`, `:success`, or `:warning`.
`reappear`	`Boolean`	`false`	Whether or not the flash banner should reappear after being dismissed. Only for use in test and preview environments.
`system_arguments`	`Hash`	N/A	System arguments

Slots

`action`

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.

Examples

Schemes

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

Full width

<%= render(Primer::Alpha::Banner.new(full: true)) { "This is a full width banner!" } %>

Dismissible

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

Custom icon

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

With action button

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

With custom action

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

Edit this page on GitHub