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>import { Alert, AlertDescription, AlertTitle } from "@/components/starwind/alert";
export function Example() { return ( <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 alertFramework Availability
Astro Available React AvailableAlert is available for Astro and React.
Usage
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
Styled Component API
These props are added or materially changed by the installed Astro styled component. Standard HTML attributes remain available through the inherited interfaces noted below. Follow the Primitive and Runtime links for lower-level behavior props.
Alert
Inherits div attributes.
Contains the following additional props:
variant "default" | "primary" | "secondary" | "info" | "success" | "warning" | "error" "default"
- Description
- Selects the component's visual variant.
- Classification
- Styled variant
Changelog
v1.4.0
- Added contract-generated Astro and React implementations while preserving the component’s existing public API and styling.
v1.3.2
- Refactor tailwind variants functions into separate
variants.tsfile
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.