Alert

lightest of the thirteen, by js weight

A live region with a border. The role follows the variant, so a confirmation waits its turn and an error does not.

Example (a11y tier)

Your changes are saved automatically as you type.

PublishedThe release is live. It may take a minute to appear everywhere.

Check the datesThe end date is before the start date.

Could not saveWe could not reach the server. Your work is still here.

Import

import Alert from 'abaabil/alert'         // structure only

import Alert from 'abaabil/alert/styled'  // + CSS

import Alert from 'abaabil/alert/a11y'    // + live region semantics

The role is derived, not a prop you have to get right

info and success get role="status", announced politely, after whatever the user is currently hearing finishes. warning and danger get role="alert", announced immediately, interrupting.

Interrupting is right for an error the user has to deal with and wrong for a confirmation, and picking the wrong one is the common failure. Since the correct answer is the same every time, the component makes it rather than asking. Override with live when your case genuinely differs.

aria-live is only spelled out when you override, because the role already implies a politeness and a role and an aria-live that disagree are resolved differently by different screen readers.

Read this before using it

A live region is announced when its contents change, and assistive technology has to be observing the region before that happens. An alert that arrives in the DOM already carrying its message may not be announced at all, and the behaviour differs between screen readers. This is the single most common reason a correctly-marked-up alert is never heard.

So if the message appears in response to something the user did, render the component from the start with empty children and fill it in, rather than mounting the whole alert at the moment you have something to say:

<Alert variant="danger" title={error ? 'Could not save' : undefined}>
  {error}
</Alert>

Rendered empty it paints nothing, so there is no cost to having it there and waiting.

The title is not a heading

title renders as <strong>, not <h2>. An alert is usually not a section of the document, and a heading that appears and disappears with a transient message damages the outline for anyone navigating by headings.

Props

Prop	Type	Default	Tier	Description
`variant`	'info' \| 'success' \| 'warning' \| 'danger'	'info'	all	Applied as `data-variant`. At the a11y tier it also selects the role.
`className`	string	—	all	Merged with the base class.
`live`	'polite' \| 'assertive' \| 'off'	from `variant`	a11y	Overrides the politeness the variant implies. `off` drops the role entirely.
`title`	string	—	a11y	Rendered above the message as `<strong>`.
...props	—	—	all	Everything else lands on the wrapper.