# Alert
> A message that stays in the page next to the content it is about, with optional actions.
## Anatomy
An `.alert` is a message that stays in the page, next to the content it is about, until the problem goes away or the user dismisses it.
Put an optional leading icon in the alert, then the message: a heading, a `
`, or both. Use a [snackbar](/snackbar.html.md) for brief feedback after an action, and a [dialog](/dialogs.html.md) when the user must decide before going on.
Your trial ends in 3 days. [See plans](#tokens)
```
```
## Critical
Add `critical` for problems that stop something from working. It uses the error container colors.
### Payment failed
Your card was declined. Update it to keep your workspace active.
```
error
Payment failed
Your card was declined. Update it to keep your workspace active.
```
## Actions and close
Put buttons in an `.alert-actions` row to place them under the message, aligned to the end. Make an `.icon-button` the last child to use it as the close button. It stays beside the first line. Your page closes the alert. Remove the alert, then move focus to something nearby so focus does not fall back to the top of the page.
You're offline. Edits are saved on this device and sync when the connection returns.
Retry sync
```
cloud_off
You're offline. Edits are saved on this device and sync when the connection returns.
```
## Announcing changes
An alert that is in the page when it loads needs no role. When an alert appears or changes while the page is in use, put `role="status"` on its text. Use `role="alert"` instead when the user must act now. Add the live element to the page before you write the text into it. Keep the buttons out of the live element, because a screen reader would read their labels as part of the message. Never use `role="banner"`, which marks the page header.
```
error
```
## Error summary
Put an `.error-summary` alert at the top of a `novalidate` form to list what is wrong when the form is submitted. When the user submits while any field is invalid:
1. The submit stops, as it would natively.
2. The Forms behavior writes one link per invalid field into the summary's `
`, with the field's label and the browser's message. A radio group gets one link, named by its legend.
3. The summary shows and takes focus, so a screen reader reads it.
Each link focuses its field. A valid submit hides the summary again. A submit button with `formnovalidate` skips the check.
`novalidate` is required. Without it, the browser stops an invalid form before the submit event, and only the first field's bubble appears. Keep each field's own error text too, because the summary only gathers them.
```