--- title: Alerts path: components/alerts status: Stable source: 'https://github.com/primer/css/tree/master/src/alerts' bundle: alerts --- Flash messages, or alerts, inform users of successful or pending actions. Use them sparingly. Don't show more than one at a time. ## Default Flash messages start off looking decently neutral—they're just light blue rounded rectangles. ```html live
Flash message goes here.
``` You can put multiple paragraphs of text in a flash message—the last paragraph's bottom `margin` will be automatically override. ```html live

This is a longer flash message in it's own paragraph. It ends up looking something like this. If we keep adding more text, it'll eventually wrap to a new line.

And this is another paragraph.

``` 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._ ```html live
Flash message goes here.
``` ## Colors Add `.flash-warn`, `.flash-error`, or `.flash-success` to the flash message to make it yellow, red, or green, respectively. ```html live
Flash message goes here.
Flash message goes here.
Flash message goes here.
Flash message goes here.
``` ## With icon Add an icon to the left of the flash message to give it some funky fresh attention. ```html live
Flash message with an icon
Flash message with an icon
Flash message with an icon
Flash message with an icon
``` When using a `24px` icon, add a `.v-align-bottom` class and increase the font-size with `.f4` for a more balanced alignment. ```html live
Flash message with a larger icon
``` ## With dismiss Add a JavaScript enabled (via Crema) dismiss (close) icon on the right of any flash message. ```html live
Dismissable flash message goes here.
Dismissable flash message goes here.
Dismissable flash message goes here.
Dismissable flash message goes here.
``` ## With action button A flash message with an action button. ```html live
Flash message with action here.
``` ## Full width flash A flash message that is full width and removes border and border radius. ```html live
Full width flash message.
``` ## Flash banner A flash message that is fixed positioned at the top of the page. Use for more global events where the content of the page is unknown. ```html live
Flash banner message.
```