--- title: Alert summary: Alerts report the result of an action or a problem to fix, in success, info, warning and danger variants, with icons, links and a dismiss button. description: Show alert messages that inform users about success, info, warning, or danger states, with icons, links, and dismissible options. related: [/ui/components/toast] source: core/scss/ui/_alerts.scss css-vars: alert classnames: component: - class: alert desc: Container element part: - class: alert-heading desc: Title line above the message - class: alert-description desc: Secondary text under the title - class: alert-icon desc: Icon slot, sized and colored with the alert - class: alert-link desc: Link inside the message, matched to the alert color - class: alert-action desc: Underlined link on its own line, for the next step - class: alert-list desc: List inside the alert, with the default list margin removed style: - class: alert-important desc: Solid fill in the alert color, with white text - class: alert-minor desc: Drops the tinted background, keeps a plain border - class: alert-dismissible desc: Reserves room on the trailing edge for the close button color: - class: alert-{color} desc: Any base color, for example alert-success, alert-blue or alert-muted --- import Example from '@components/Example.astro'; import Alert from '@ui/Alert.astro'; import Icon from '@ui/Icon.astro' ## Default markup An alert comes in four types: success, info, warning and danger. Pick the one that matches the message, so the color says at a glance whether something went right or wrong. Combine `alert` class with one of the following: `alert-success`, `alert-info`, `alert-warning`, `alert-danger` to get the alert that you need. Alert classes affect the color of all the text inside an alert. Use another class, e.g. `text-secondary` to change the color of the alert's content. ## Alert links Add a link to your alert message to redirect users to the details they need to complete or additional information they should read. Use `alert-link` class to style the link and match the text color. Use `alert-action` instead when the link is the thing to do next rather than a word inside a sentence. It is underlined on its own line and drops the underline on hover. ## Alert with a list Wrap several messages in a `ul` with the `alert-list` class. It removes the default list margin so the items sit flush inside the alert. ## Minor alerts Add `alert-minor` for a quieter alert. It drops the tinted background and keeps a plain border, so the color only shows in the icon and the heading. Use it where an alert would otherwise dominate the page. ## Dismissible alerts Add a close button to let the user dismiss the alert. It stays on the page until they do. ```html ``` ## Alerts with icons An icon in front of the text repeats the type of the alert, which helps when several alerts are on the page. Put the icon in an `alert-icon` wrapper as the first child of the alert, and the heading and text in a second element next to it. The alert lays its children out in a row, so no extra flex wrapper is needed. ## Alert with avatar Put an [avatar](/ui/components/avatar) in the alert when the message is about a person, such as a mention or a request. ## Alert with buttons Add [buttons](/ui/components/button) when the alert asks the user to do something, for example to confirm or to retry. Buttons don't inherit the alert's color, so you should set the proper class if you want it to be matched. For example, `btn-success` for `alert-success`. ## Important alerts Add `alert-important` to fill the whole alert with its color. Use it for messages that must not be missed. ```html ``` You can also use other elements, like icons and dismissible buttons, with this type of alert. Links work here too. Both `alert-link` and `alert-action` follow the alert color, so they turn white on the solid background. ## Custom alert color You're not limited to the 4 default alert colors. You can use any [base color](/ui/base/colors) you want. ## Accessibility - Give an alert a role that matches how urgent it is. `role="alert"` interrupts the screen reader and suits an error; `role="status"` waits for a pause and suits a confirmation. - The live region has to exist before the message arrives. Render the container on page load and put the text into it, rather than inserting the whole alert at the moment of the event. - Label the dismiss button with `aria-label="Close"`. `btn-close` has no text of its own. - The icon is decoration, so the alert must still read correctly with the icon ignored. Keep the meaning in the heading and the text. - Color alone does not say "error". A red alert and a green one must differ in their words too. - After dismissing an alert, move focus somewhere sensible. Focus left on a removed element falls back to the top of the page.