Alert
Inline feedback: info, success, warning or error.
Installation
npx axiom add alertpnpm dlx axiom add alertyarn dlx axiom add alertbun x axiom add alertAlso copies: icon-button.
Requires the info, success, warning, error and close icons in your icon registry. Colors come from alert.<variant>.default.{background,icon,border} in the component tokens.
Usage
import { Alert } from "@/components/ui/alert";
<Alert variant="warning" title="Storage almost full">
Free up space to keep syncing.
</Alert>;Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'info' | 'success' | 'warning' | 'error' | 'neutral' | 'info' | Picks the subtle background and icon color from the feedback colors (feedback.warningSubtle + feedback.warning…). |
title | ReactNode | — | Short, bold summary. An alert can have only a title, only a description, or both. |
children | ReactNode | — | Under the title: a string for a plain description, or Alert.Description and Alert.Action in the order you want. |
icon | IconName | null | per variant | Leading icon. Each variant has a default (info, success, warning, error; info for neutral); null removes it. |
onDismiss | () => void | — | Shows a close button in the top-right corner. Hiding the alert is up to you. |
accessibilityLiveRegion | 'polite' | 'assertive' | 'none' | 'assertive' for error, 'none' otherwise | Announces the alert when it appears. error alerts are announced and get accessibilityRole="alert"; others are read in order. |
style | StyleProp<ViewStyle> | — | Extra styles for the container. |
Parts
| Part | What it is |
|---|---|
Alert.Description | The description in content.muted, when it sits next to an action. A plain string child is wrapped in one for you. |
Alert.Action | A text button in the alert’s color, such as “Manage storage” or “Retry”. It takes Tappable props and its label as children. |
For a filled button instead of a text action, put a Button where you would put Alert.Action.
Use cases
Form error summary
Above a form, after a failed submit. Say what went wrong and what to do; the fields show the details.
{
error && (
<Alert variant="error" title="Wrong email or password">
{attemptsLeft} attempts left before a 15-minute lock.
</Alert>
);
}Warning with an action
The action fixes the problem right there, without a trip to another screen first.
<Alert
variant="warning"
title="Your plan ends in 3 days"
onDismiss={() => setDismissed(true)}
>
<Alert.Description>You'll lose access to shared projects.</Alert.Description>
<Alert.Action onPress={openBilling}>Renew now</Alert.Action>
</Alert>Contextual information
A neutral or info alert next to the content it explains, where a tooltip would be missed.
{
amount > 2000 && (
<Alert>Transfers over €2,000 arrive the next business day.</Alert>
);
}When to use it
Alert stays in the layout, next to the content it describes. For a message that appears and goes away, use Toast or Snackbar.