# Alerts A message that stays on the page beside what it is about: a check passed, a suggestion, a warning before an action. A message that comes and goes is a [toast](toast.md). ## Examples An icon, then the words in a `
`. The plain `alert` is neutral; the tones follow Bootstrap's. ```html
The changes apply to the next booking.
A shorter title would fit the search results.
White text on it: 5.6:1, AA in both themes.
The Thai translation is older than the English.
The theme template raised a PHP warning; the page did not rebuild.
Translated by machine; a person has not read it yet.
``` ### With a title and actions ```html
A shorter title

“North Bay by speedboat” fits the 60 characters search results show.

``` ### Filled in place An alert whose words come after an action - a refused sign-in, a wrong code - is on the page from the start, empty, as `role="alert"`, and the page fills it. Empty - no child, not even a space - it takes no room; filled, it shows, and a screen reader says its words. An alert shown from `hidden` at the moment it is filled is not always heard: VoiceOver on macOS 15 can miss it. ```html
``` ### Sizes `alert-sm` for a note inside a card or a form, `alert-lg` for the one message a page is about. ```html
Prices include the park fee.
Prices include the park fee.
``` ### A title over its text The words may be a `vstack`: it stays beside the icon however long its text. ```html
The backup is two days oldThe nightly copy stopped on Tuesday, so today's changes are not in it yet. Run one by hand before the next update.
``` ## Accessibility - An alert that is on the page from the start is plain content - no live region. One that appears after an action and must be heard goes in a live region, or is a toast. - A suggestion with its own actions is a `region` named after what it is. - The icon carries the tone in forced colors; the words carry the meaning. ## Tokens From [`css/components/alert.css`](https://github.com/redz-tech/REDZ.UI/blob/main/css/components/alert.css). It declares `--redz-alert-bg`, `--redz-alert-icon` on its root, never on rows or items. It reads the theme's `--redz-secondary-subtle`, `--redz-secondary`, `--redz-space-8`, `--redz-space-12`, `--redz-space-16`, `--redz-radius-12`, `--redz-text`, `--redz-radius-8`, `--redz-fs-14`, `--redz-space-20`, `--redz-fs-16`, `--redz-primary-subtle`, `--redz-primary`, `--redz-success-subtle`, `--redz-success`, `--redz-danger-subtle`, `--redz-danger`, `--redz-warning-subtle`, `--redz-warning`, `--redz-info-subtle`, `--redz-info`. ## From Bootstrap 5.3 | Bootstrap 5.3 | REDZ.UI | Change | Note | | --- | --- | --- | --- | | `alert-dark` | - | review | the plain alert, or a tone | | `alert-dismissible` | - | review | a btn-close at the end, removed by your script | | `alert-heading` | - | review | a strong title in the alert's div | | `alert-light` | - | review | the plain alert, or a tone | | `alert-link` | - | review | a plain link | | `alert-secondary` | - | review | the plain alert, or a tone | | `data-bs-dismiss="alert"` | - | review | remove the alert in your script |