Alert
Heads up!
A simple alert with an “AlertTitle” and an “AlertDescription”.
---import { Alert, AlertDescription, AlertTitle } from "@/components/starwind/alert";---
<Alert variant="info"> <AlertTitle>Heads up!</AlertTitle> <AlertDescription> A simple alert with an "AlertTitle" and an "AlertDescription". </AlertDescription></Alert>Installation
pnpx starwind@latest add alertnpx starwind@latest add alertyarn dlx starwind@latest add alertUsage
icon
You can add any svg icon inside the <AlertTitle> component and it will be automatically styled.
Danger!
This action is destructive and may have unintended consequences.
---import { Alert, AlertDescription, AlertTitle } from "@/components/starwind/alert";import Flame from "@tabler/icons/outline/flame.svg";---
<Alert variant="error"> <AlertTitle><Flame />Danger!</AlertTitle> <AlertDescription> This action is destructive and may have unintended consequences. </AlertDescription></Alert>variant
variant=“default”
A simple alert with an “AlertTitle” and an “AlertDescription”.
variant=“primary”
A simple alert with an “AlertTitle” and an “AlertDescription”.
variant=“secondary”
A simple alert with an “AlertTitle” and an “AlertDescription”.
variant=“info”
A simple alert with an “AlertTitle” and an “AlertDescription”.
variant=“success”
A simple alert with an “AlertTitle” and an “AlertDescription”.
variant=“warning”
A simple alert with an “AlertTitle” and an “AlertDescription”.
variant=“error”
A simple alert with an “AlertTitle” and an “AlertDescription”.
---import { Alert, AlertDescription, AlertTitle } from "@/components/starwind/alert";---
<Alert variant="default"> <AlertTitle>variant="default"</AlertTitle> <AlertDescription> A simple alert with an "AlertTitle" and an "AlertDescription". </AlertDescription></Alert><Alert variant="primary"> <AlertTitle>variant="primary"</AlertTitle> <AlertDescription> A simple alert with an "AlertTitle" and an "AlertDescription". </AlertDescription></Alert><Alert variant="secondary"> <AlertTitle>variant="secondary"</AlertTitle> <AlertDescription> A simple alert with an "AlertTitle" and an "AlertDescription". </AlertDescription></Alert><Alert variant="info"> <AlertTitle>variant="info"</AlertTitle> <AlertDescription> A simple alert with an "AlertTitle" and an "AlertDescription". </AlertDescription></Alert><Alert variant="success"> <AlertTitle>variant="success"</AlertTitle> <AlertDescription> A simple alert with an "AlertTitle" and an "AlertDescription". </AlertDescription></Alert><Alert variant="warning"> <AlertTitle>variant="warning"</AlertTitle> <AlertDescription> A simple alert with an "AlertTitle" and an "AlertDescription". </AlertDescription></Alert><Alert variant="error"> <AlertTitle>variant="error"</AlertTitle> <AlertDescription> A simple alert with an "AlertTitle" and an "AlertDescription". </AlertDescription></Alert>API Reference
Alert
The root component that serves as a container for alert content. It provides styled notification messages with different visual variants.
| Prop | Type | Default |
|---|---|---|
variant | "default" | "primary" | "secondary" | "info" | "success" | "warning" | "error" | "default" |
class | string | - |
<Alert variant="info"> <!-- Alert content --></Alert>AlertTitle
A component for rendering the alert title with appropriate styling.
| Prop | Type | Default |
|---|---|---|
class | string | - |
<AlertTitle> <Icon /> Heads up!</AlertTitle>Tip
Adding an SVG icon inside <AlertTitle> will automatically style it to match the current alert variant.
AlertDescription
A component for rendering the alert description with appropriate styling.
| Prop | Type | Default |
|---|---|---|
class | string | - |
<AlertDescription> A simple alert with an "AlertTitle" and an "AlertDescription".</AlertDescription>Changelog
v1.3.0
- style and focus state updates
v1.2.0
- Add a
data-slotattribute to all components to enable global styling updates - add
role="alert"and other small accessibility improvements
v1.1.1
- Adjust component to use type
VariantPropsfromtailwind-variants. This provides greater type safety and cleans up component frontmatter.
v1.1.0
tailwind-variantsnow implemented. This usestailwind-mergeunder the hood to merge Tailwind classes without style conflicts, allowing you to override any existing classes using the “class” prop.