Skip to content

Alert

Contextual feedback for an action or a state change. Renders withrole="alert" so assistive tech announces it.

Variants

<Alert><strong>Heads up.</strong> This is an informational message.</Alert>
<Alert variant="success"><strong>Saved.</strong> Your changes are live.</Alert>
<Alert variant="warning"><strong>Careful.</strong> This cannot be undone later.</Alert>
<Alert variant="danger"><strong>Failed.</strong> The request was rejected.</Alert>

Dismissible

<Alert variant="info" dismissible>
  Click the close button to remove this alert.
</Alert>

Styles: filled and outline

<Alert variant="success" style="filled">...</Alert>
<Alert variant="danger" style="outline">...</Alert>

Listening for dismissal

Dismissing dispatches a bubbling ink:alert:dismiss event from the alert root:

document.addEventListener("ink:alert:dismiss", (event) => {
  console.log("alert dismissed", event.target);
});

Alerts rendered after page load (client-side HTML) are wired by callingwindow.Ink.init(root).

Props

PropTypeDefaultDescription
variantinfo | success | warning | dangerinfoSemantic color.
styletint | filled | outlinetintFilled uses white text on the semantic color (AA in the default theme).
dismissiblebooleanfalseShows a close button that removes the alert.
rolestringalertARIA role. Use status for less urgent announcements.

Theming

:root {
  --ink-alert-radius: 0;   /* square alerts */
}

Accessibility