Work in progress - do not use in production. This component is still being built: it is not flagged Ready for Dev, so its markup, attributes, events and styles can all still change without notice, it is not covered by the accessibility gate, and it is not published to npm. It is on this site so the work can be seen and reviewed - nothing more.

Alert

A message with an intent, rendered as <span is="root-alert"> and announced as a live region. Inline and contextual by default; a page-level announcement is the same component with role="region" and a name.

Usage

Your changes were saved.

<span is="root-alert" variant="success">Your changes were saved.</span>

The alert is its own live region: variant decides how urgent it is, so danger and warning announce assertively (role="alert") while info and success announce politely (role="status"). An author-set role always wins - which is how a persistent page-level strip is written:

We've updated our terms of service. Read more

<span is="root-alert" variant="info" role="region" aria-label="Announcement" dismissible>
  We've updated our terms of service. <a href="/terms">Read more</a>
</span>

Colours

One per intent. The tint is light in both schemes - the semantic ramps do not mirror - so the ink is the variant's own darkest step rather than the neutral one, and the pair stays readable under either scheme.

Info - something worth knowing. Success - that worked. Warning - check this before continuing. Danger - that did not work.

<span is="root-alert" variant="info">Info - something worth knowing.</span>
<span is="root-alert" variant="success">Success - that worked.</span>
<span is="root-alert" variant="warning">Warning - check this before continuing.</span>
<span is="root-alert" variant="danger">Danger - that did not work.</span>

With no variant the alert takes the neutral surface, which does mirror:

Neutral - no intent attached.

<span is="root-alert">Neutral - no intent attached.</span>

Sizes

Three steps, moving the padding and the text size.

Large Medium Small

<span is="root-alert" variant="info" size="large">Large</span>
<span is="root-alert" variant="info">Medium</span>
<span is="root-alert" variant="info" size="small">Small</span>

Dismissible

dismissible is opt-in: it injects a close button that fires root-alert.dismiss and removes the alert. Without it the alert stays until the page removes it.

Dismiss me. And me.

<span is="root-alert" variant="warning" dismissible>Dismiss me.</span>
<span is="root-alert" variant="danger" dismissible size="small">And me.</span>

Attributes

Attribute	Type	Default	Description
`variant`	`'info' \| 'success' \| 'warning' \| 'danger'`	-	Colour and intent; also the live-region politeness
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	Padding and text size
`dismissible`	`boolean`	`false`	Adds a close button
`role`	`'alert' \| 'status' \| 'region'`	from `variant`	Overrides the politeness the variant picks

Events

Event	Detail	Description
`root-alert.dismiss`	-	Fired when the alert is dismissed (then it removes itself)

Methods

Method	Description
`dismiss()`	Fire `root-alert.dismiss` and remove the alert

Extends

HTMLSpanElement - use with <span is="root-alert">.