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 | — | Description under the title, in content.muted. |
icon | IconName | null | per variant | Leading icon. Each variant has a default (info, success, warning, error; info for neutral); null removes it. |
action | { label: string; onPress: () => void } | — | A text action under the description, such as “Manage storage” or “Retry”. |
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. |
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"
action={{ label: "Renew now", onPress: openBilling }}
onDismiss={() => setDismissed(true)}
>
You'll lose access to shared projects.
</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.