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.

Examples

An icon, then the words in a <div>. The plain alert is neutral; the tones follow Bootstrap's.

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.

<div class="alert"><i class="bi bi-info-circle" aria-hidden="true"></i><div>The changes apply to the next booking.</div></div>
<div class="alert alert-primary"><i class="bi bi-stars" aria-hidden="true"></i><div>A shorter title would fit the search results.</div></div>
<div class="alert alert-success"><i class="bi bi-check-circle" aria-hidden="true"></i><div>White text on it: 5.6:1, AA in both themes.</div></div>
<div class="alert alert-warning"><i class="bi bi-exclamation-triangle" aria-hidden="true"></i><div>The Thai translation is older than the English.</div></div>
<div class="alert alert-danger"><i class="bi bi-x-octagon" aria-hidden="true"></i><div>The theme template raised a PHP warning; the page did not rebuild.</div></div>
<div class="alert alert-info"><i class="bi bi-robot" aria-hidden="true"></i><div>Translated by machine; a person has not read it yet.</div></div>

With a title and actions

A shorter title

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

<div class="alert alert-primary align-items-start" role="region" aria-label="AI suggestion">
	<i class="bi bi-stars" aria-hidden="true"></i>
	<div class="vstack gap-8">
		<strong>A shorter title</strong>
		<p>“North Bay by speedboat” fits the 60 characters search results show.</p>
		<div class="hstack gap-8"><button class="btn btn-sm btn-primary" type="button">Use it</button><button class="btn btn-sm btn-text" type="button">Dismiss</button></div>
	</div>
</div>

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.

<div class="alert alert-danger" id="alert-fill-words" role="alert"></div>
<div class="hstack gap-8"><button class="btn btn-secondary" type="button" data-docs-run="alert-fill">Fill the alert</button></div>

Sizes

alert-sm for a note inside a card or a form, alert-lg for the one message a page is about.

Prices include the park fee.

<div class="alert alert-info alert-sm"><i class="bi bi-info-circle" aria-hidden="true"></i><div>Prices include the park fee.</div></div>
<div class="alert alert-info alert-lg"><i class="bi bi-info-circle" aria-hidden="true"></i><div>Prices include the park fee.</div></div>

A title over its text

The words may be a vstack: it stays beside the icon however long its text.

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.

<div class="alert alert-warning"><i class="bi bi-exclamation-triangle" aria-hidden="true"></i><div class="vstack gap-4"><strong>The backup is two days old</strong><span>The nightly copy stopped on Tuesday, so today's changes are not in it yet. Run one by hand before the next update.</span></div></div>

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. 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