Flash messages, or alerts, inform users of successful or pending actions. Use them sparingly. Don’t show more than one at a time.


Flash messages start off looking decently neutral—they’re just light blue rounded rectangles.

You can put multiple paragraphs of text in a flash message—the last paragraph’s bottom margin will be automatically override.

Should the need arise, you can quickly space out your flash message from surrounding content with a .flash-messages wrapper. Note the extra top and bottom margin in the example below.


Add .flash-warn, .flash-error, or .flash-success to the flash message to make it yellow, red, or green, respectively.

With icon

Add an icon to the left of the flash message to give it some funky fresh attention.

<div class="flash">
  <%= octicon "alert" %>
  Flash message with an icon goes here.

With dismiss

Add a JavaScript enabled (via Crema) dismiss (close) icon on the right of any flash message.

<div class="flash">
  <button class="flash-close js-flash-close" type="button"><%= octicon "x", :"aria-label" => "Close" %></button>
  Dismissable flash message goes here.

With action button

A flash message with an action button.

Full width flash

A flash message that is full width and removes border and border radius.

Edit this page on GitHub