Alert

A callout for a short, important message, with an optional leading icon (an <svg> as Root's first child). No role by default, since a message already on the page when it loads shouldn't be announced; set `announce` when the alert appears in response to something.

WAI-ARIA pattern

Installation

npx nuecrea-ui add alert

Usage

import * as Alert from '@/components/ui/alert';

function InfoIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
      <circle cx="12" cy="12" r="10" />
      <path d="M12 16v-4M12 8h.01" />
    </svg>
  );
}

export default function AlertStory() {
  return (
    <main className="grid max-w-md gap-4">
      <Alert.Root>
        <InfoIcon />
        <Alert.Title>Scheduled maintenance</Alert.Title>
        <Alert.Description>
          Acme will be read-only on Sunday from 02:00 to 03:00 UTC.
        </Alert.Description>
      </Alert.Root>
      <Alert.Root variant="destructive">
        <InfoIcon />
        <Alert.Title>Payment failed</Alert.Title>
        <Alert.Description>
          Update your card to keep your Pro plan.
        </Alert.Description>
      </Alert.Root>
      <Alert.Root announce="polite">
        <Alert.Title>Export ready</Alert.Title>
        <Alert.Description>No icon, role=status.</Alert.Description>
      </Alert.Root>
    </main>
  );
}

API reference

Alert.Root

The alert box. An <svg> child becomes the icon column. Renders <div>.

PropTypeDefaultDescription
variant'default' | 'destructive'"default"Visual style.
announce'polite' | 'assertive'—Makes screen readers announce the alert when it is inserted: 'polite' sets role=status, 'assertive' sets role=alert. Leave unset for static messages.

Alert.Title

The alert's heading line. Renders <div>.

Alert.Description

The alert's body text. Renders <div>.