Alert

Usage

import {
  Alert,
  AlertAction,
  AlertDescription,
  AlertTitle,
} from "@tulipfarm/sprout/alert";
import { InfoCircle } from "reicon-react/icons/InfoCircle";

<Alert variant="destructive">
  <AlertTitle>This table is unavailable</AlertTitle>
  <AlertDescription>
    It was deleted, or your access to it changed.
  </AlertDescription>
</Alert>

<Alert role="status">
  <InfoCircle aria-hidden="true" />
  <AlertTitle>Chat archived</AlertTitle>
  <AlertDescription>It moved to Archived chats.</AlertDescription>
  <AlertAction>
    <Button variant="ghost" size="sm" onClick={undo}>Undo</Button>
  </AlertAction>
</Alert>

variant is "default" or "destructive". Both sit on the surface color. Destructive tints the text, title, and icon with --sprout-danger. There is one size.

Every part is optional. Use a description alone for short notes, add a title for a headline, and put an icon first to get a two-column layout. Icons are sized to 16px unless they carry a size-* class. AlertAction pins a small control to the top-right corner and reserves space for it.

Actions

Put recovery buttons after the description in a wrapping row, or place a single button as a direct child. Direct buttons and buttons inside the description align to the start instead of stretching. A link-style button in the description stays inline with the text.

Rich content

Descriptions accept paragraphs, lists, and links. Paragraphs are spaced for you; lists keep the classes you give them. Plain text, <p>, and <pre> work as direct children too. The content column can shrink to zero, so long names wrap instead of overflowing.

Prefer short answers.
Use metric units.
Summaries should lead with the decision, then the reasons.

States

Alerts are static. Your app decides when to show one and which variant to use. Switch variant from the outcome of the work, and render one alert per item when several things fail.

API

import { Alert, alertVariants } from "@tulipfarm/sprout/alert";

<Alert role="note" render={<section />}>…</Alert>

<div role="alert" className={alertVariants({ variant: "destructive" })}>
  {error}
</div>

All four parts render a div and accept the Base UI render prop, className, ref, and any HTML attribute. alertVariants() returns the alert classes for elements you render yourself.

Parts get data-slot values of alert, alert-title, alert-description, and alert-action. The root also gets data-variant.

Accessibility

Alert has role="alert" by default, so screen readers announce it when it appears. Pass role="status" for results that should not interrupt, or role="note" for standing information. Mark icons aria-hidden; the words carry the meaning.

Alerts never take focus. Buttons and links inside keep their own focus rings and keyboard behavior. Alerts fade in over 180ms; links change color over 120ms. Both stop when reduced motion is requested.

Theme tokens

Alerts use --sprout-surface, --sprout-line, --sprout-text, --sprout-muted, --sprout-danger, and --sprout-radius-control. They follow light and dark mode and need no brand color, so they look the same with the neutral and TulipFarm themes.