Alert
Displays a callout for user attention with optional title, description, and action.
Loading preview…
1<script lang="ts">
2 import CheckCircle2Icon from "@lucide/svelte/icons/check-circle-2";
3 import * as Alert from "$registry/items/components/alert/index.js";
4</script>
5
6<Alert.Root class="w-full max-w-xl">
7 <CheckCircle2Icon />
8 <Alert.Title>Success! Your changes have been saved</Alert.Title>
9 <Alert.Description
10 >This is an alert with icon, title and description.</Alert.Description
11 >
12</Alert.Root>
13Installation
1. Install dependencies
2. Copy these files into your project
- ~/components/alert/alert.svelte
- ~/components/alert/alert-title.svelte
- ~/components/alert/alert-description.svelte
- ~/components/alert/alert-action.svelte
- ~/components/alert/alert.variants.ts
- ~/components/alert/index.ts
Usage
Use alerts for status messages, warnings, and important callouts.
1<script lang="ts">
2 import CheckCircle2Icon from "@lucide/svelte/icons/check-circle-2";
3 import * as Alert from "~/components/alert";
4</script>
5
6<Alert.Root>
7 <CheckCircle2Icon />
8 <Alert.Title>Success! Your changes have been saved</Alert.Title>
9 <Alert.Description>This is an alert with icon, title and description.</Alert.Description>
10</Alert.Root>Pass variant="destructive" for error-style callouts. Compose an icon as a direct child of Alert.Root for a leading indicator, and use Alert.Action for a corner action.