Components
Alert
A themed message container for status updates and feedback.
Props
Native attributes and event handlers are forwarded to the div element.
Use success, warning, error, or info variants. Choose role="alert" for urgent announcements.
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | undefined | Content rendered inside the component. |
class | string | '' | Classes merged with theme styles and variants. |
element | HTMLDivElement | null | null | Bindable reference to the native element. |
inTransition | TransitionProps | undefined | Entrance override; falls back to transition. |
isVisible | boolean | true | Bindable visibility; removing the component runs its exit transition. |
outTransition | TransitionProps | undefined | Exit override; falls back to transition. |
role | HTMLAttributes<HTMLDivElement>['role'] | 'status' | Defaults to polite status announcements; use alert for urgent messages. |
theme | Theme | global theme | Local theme override. |
transition | TransitionProps | [noopTransition, {}] | Transition function and optional parameters. |
variants | string[] | [] | Local variants or references to other theme styles. |
Default usage
Import Alert from sveltewind/components. This example shows its default styling in a usable context.
Loading...Examples
Theme variants
Every variant available for Alert in the built-in themes is shown below.
error — Apply the error variant.
Loading...info — Apply the info variant.
Loading...success — Apply the success variant.
Loading...warning — Apply the warning variant.
Loading...compact — Apply the compact variant.
Loading...Class overrides
Apply rounded-xl border border-primary-500/40 p-4 locally.
Loading...Props and behavior
Bind isVisible and toggle it with a button to control whether the component is rendered.
Loading...Content and values
Provide different text, child content, or definitions inside the required parent context.
Loading...Loading...