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
| Prop | Type | Default |
|---|---|---|
color | 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'default' |
variant | 'subtle' | 'solid' | 'outline' | 'subtle' |
class | string | — |
children | Snippet | — |
Alert.Title
| Prop | Type | Default |
|---|---|---|
as Element to render. Defaults to a semantic `<p>` (not a bare `<div>`). | string | 'p' |
class | string | — |
children | Snippet | — |
Alert.Description
| Prop | Type | Default |
|---|---|---|
class | string | — |
children | Snippet | — |
Alert.Root — plus every native <div> attribute
via prop spreading.
Alert.Title
Alert.Description