Alert
Alert
Semantic alert boxes with role="alert" for info, warning, destructive, and success states
New version available
Run npm update to get the latest features and fixes.
Deprecation notice
This API will be removed in the next major version. Please migrate to the new one.
Build failed
There were 3 errors during compilation. Check the logs for details.
Deployed successfully
Your changes are live at production.
Installation
npx @ravikumarsurya/mdx-ui add alertUsage
<Alert variant="info">
<AlertTitle>Heads up</AlertTitle>
<AlertDescription>
You can customise this component in your project.
</AlertDescription>
</Alert>Examples
Info
<Alert variant="info">
<AlertTitle>New version available</AlertTitle>
<AlertDescription>
Run npm update to get the latest features.
</AlertDescription>
</Alert>Warning
<Alert variant="warning">
<AlertTitle>Deprecation notice</AlertTitle>
<AlertDescription>
This API will be removed in v3.0. Migrate to the new endpoint.
</AlertDescription>
</Alert>Destructive
<Alert variant="destructive">
<AlertTitle>Build failed</AlertTitle>
<AlertDescription>
TypeScript errors were found. Check the output for details.
</AlertDescription>
</Alert>Success
<Alert variant="success">
<AlertTitle>Deployment complete</AlertTitle>
<AlertDescription>Your changes are live at production.</AlertDescription>
</Alert>Without title
<Alert variant="info">
<AlertDescription>
You can omit AlertTitle and use AlertDescription on its own.
</AlertDescription>
</Alert>Difference from Callout
| Alert | Callout | |
|---|---|---|
| Semantic role | role="alert" (live region) | none |
| Screen readers | Announced immediately | Not announced |
| Use for | Status changes, errors, confirmations | Tips, notes, documentation callouts |
Use Alert when something has happened or changed (form errors, success messages, warnings about an action). Use Callout for static informational notes in documentation.
Props
Alert
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "info" | "warning" | "destructive" | "success" | "default" | Visual style |
className | string | — | Extra classes |
AlertTitle
| Prop | Type | Description |
|---|---|---|
children | ReactNode | Title text |
className | string | Extra classes |
AlertDescription
| Prop | Type | Description |
|---|---|---|
children | ReactNode | Description content |
className | string | Extra classes |