Heads up
New components are ready to try in your next interface.
Controls
Feedback
Alert
A loud composable feedback block for announcements, errors and status messages.
Component
02
Import
import { Alert, AlertTitle, AlertDescription } from "@swirski/ui";Playground
Usage
<Alert tone="yellow">
<AlertTitle>Heads up</AlertTitle>
<AlertDescription>
New components are ready to try in your next interface.
</AlertDescription>
</Alert>Props
| Prop | Type | Default | Notes |
|---|---|---|---|
Alert.asChild | boolean | false | Generated from AlertProps. |
Alert.size | 'sm' | 'md' | 'lg' | "md" | Generated from AlertProps. |
Alert.tone | 'blue' | 'yellow' | 'red' | 'white' | "yellow" | Applies the alert surface color. |
Alert.variant | 'solid' | 'outline' | 'soft' | "solid" | Generated from AlertProps. |
AlertDescription.size | 'sm' | 'md' | 'lg' | "md" | Generated from AlertDescriptionProps. |
AlertDescription.tone | 'default' | "default" | Applies the alert surface color. |
AlertDescription.variant | 'default' | "default" | Generated from AlertDescriptionProps. |
AlertTitle.size | 'sm' | 'md' | 'lg' | "md" | Generated from AlertTitleProps. |
AlertTitle.tone | 'default' | "default" | Applies the alert surface color. |
AlertTitle.variant | 'default' | "default" | Generated from AlertTitleProps. |
childrenRequired | ReactNode | - | Alert content, usually AlertTitle and AlertDescription. |
role | AriaRole | "status" | Accessible live-region role for the alert container. |
className | string | - | Adds classes to the root alert. |
AlertTitle.className | string | - | Adds classes to the title heading. |
AlertDescription.className | string | - | Adds classes to the description paragraph. |