Alert

A message that stays on the page, with an optional icon.

Invoices are sent at 9:00

Change the send time in your workspace settings.

When to use

Use when: A message about the page or task that should stay visible, such as a warning or a status.
Avoid when: The message is a response to an action and can go away on its own; use Toast.

Installation

bunx shelf add alert

The source lands in src/components/ui/alert.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

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

<Alert.Root variant="destructive">
  <AlertIcon />
  <Alert.Title>Payment failed</Alert.Title>
  <Alert.Description>Update your card to keep your plan.</Alert.Description>
</Alert.Root>

Examples

Destructive

For errors and anything that needs attention now.

Payment failed

Update your card to keep your plan.

Built on

Packages: @stylexjs/stylex
Shelf items: foundations, utils
Figma: In progress. See Designers and Figma.