Feedback

Alert

A prominent inline message.

Client component1 export

Tone drives the ARIA role. `danger` and `warning` use `role="alert"`, which interrupts a screen reader immediately; `info` and `success` use `role="status"`, which waits for a pause. Getting this backwards either buries an error or hijacks the user mid-sentence for something trivial.

Import

import { Alert } from "@abbainitiative/ui";

Also available from the subpath entry @abbainitiative/ui/alert.

This component carries its own "use client" directive. You can still render it from a Server Component — you simply cannot pass it a function prop, because functions do not serialise across the boundary.

Examples

Tones

Scheduled maintenance

The service will be unavailable on Sunday from 02:00.

Saved

Your changes are live.

Approaching your limit

You have used 92% of your quota.

Payment failed

Update your card details to continue.

<Stack gap={3}>
  <Alert tone="info" title="Scheduled maintenance">
    The service will be unavailable on Sunday from 02:00.
  </Alert>
  <Alert tone="success" title="Saved">Your changes are live.</Alert>
  <Alert tone="warning" title="Approaching your limit">
    You have used 92% of your quota.
  </Alert>
  <Alert tone="danger" title="Payment failed">
    Update your card details to continue.
  </Alert>
</Stack>

Dismissible

Tip

You can dismiss this message.

<Alert tone="info" title="Tip" onDismiss={() => setVisible(false)}>
  You can dismiss this message.
</Alert>

Props

Alert props. All native attributes of the underlying element are also accepted and forwarded.
Prop	Type	Default	Description
tone	`"info" \| "success" \| "warning" \| "danger"`	`"info"`	Semantic role of the message.
title	`ReactNode`		Short headline.
icon	`ReactNode`		Replaces the built-in tone icon.
onDismiss	`() => void`		Renders a close button and calls this when activated.
dismissLabel	`string`	`"Dismiss"`	Accessible name for the close button.

Accessibility

Urgent tones use `role="alert"` with `aria-live="assertive"`.
Non-urgent tones use `role="status"` with `aria-live="polite"`.
The tone icon is `aria-hidden`; it duplicates information already in the text.
The close button carries an accessible name, configurable via `dismissLabel`.