Alert
Inline status and messaging.
Usage
Import the Alert namespace and compose Alert.Root, Alert.Title, and Alert.Description. No setup required.
Heads up
New components are available in this release.
Colors
Five semantic tones via the color prop, all driven by --sve-* tokens.
Info
New components are available in this release.
Success
Your data has been saved successfully.
Warning
Please review your input before submitting.
Error
Something went wrong. Please try again.
Variants
Three visual treatments via the variant prop.
Subtle
Soft background, no border.
Outline
Transparent background, colored border.
Solid
Full color background with contrasting text.
Props
Alert.Root — plus every native <div> attribute via prop spreading.
| Prop | Type | Default |
|---|---|---|
color | 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'default' |
variant | 'subtle' | 'solid' | 'outline' | 'subtle' |
class Extra classes merged onto the root element. | string | — |
children Alert content (Title + Description). | Snippet | — |
Alert.Title
| Prop | Type | Default |
|---|---|---|
as HTML element to render as. | string | 'p' |
class Extra classes merged onto the title element. | string | — |
children Title text. | Snippet | — |
Alert.Description
| Prop | Type | Default |
|---|---|---|
class Extra classes merged onto the description element. | string | — |
children Description text. | Snippet | — |