Feedback · Application UI
Alert
A compound alert component for surfacing inline feedback messages with an optional title, description, icon slot, and action button. Intent tones (success, warning, destructive) follow the semantic tokens.
Feature showcase
Installation
Features
6 examples
Default, Variants, With Icon, With Action, With Link, No Icon.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "success" | "warning" | "destructive" | "default" | Intent tone of the alert, colors the title, icon, and description via semantic tokens (text on the card surface). |
| className | string | - | Additional CSS class names merged onto the root element. |
Source and related
| File | Path |
|---|---|
| Component | registry/ui/alert.tsx |
| Default example | content/examples/alert/default.tsx |
| Variants example | content/examples/alert/variants.tsx |
| With Icon example | content/examples/alert/with-icon.tsx |
| With Action example | content/examples/alert/with-action.tsx |
| With Link example | content/examples/alert/with-link.tsx |
| No Icon example | content/examples/alert/no-icon.tsx |