--- title: Alerts path: components/alerts status: Stable source: 'https://github.com/primer/css/tree/main/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.

``` ## 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

``` 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 close icon on the right to allow users to dismiss a flash message. ```html live

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

```