Alert
A callout for drawing attention to important messages.
Heads up!
You can add components to your app using the CLI.
Session expired
Your session has expired. Please log in again.
<script lang="ts">
import Icon from "@iconify/svelte";
import { Alert, AlertTitle, AlertDescription } from "$lib/components/ui/alert";
</script>
<div class="flex w-full max-w-md flex-col gap-3">
<Alert>
<Icon icon="heroicons:information-circle-solid" aria-hidden="true" />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription
>You can add components to your app using the CLI.</AlertDescription
>
</Alert>
<Alert variant="destructive">
<Icon icon="heroicons:exclamation-triangle-solid" aria-hidden="true" />
<AlertTitle>Session expired</AlertTitle>
<AlertDescription
>Your session has expired. Please log in again.</AlertDescription
>
</Alert>
</div>Installation
Install the lily base and `utils` (run once per project).
npx lily-svelte@latest initCopy the alert source from the registry into $lib/components/ui/alert.
Usage
<script lang="ts">
import { Alert, AlertTitle, AlertDescription } from '$lib/components/ui/alert';
</script>
<Alert>
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>You can add components using the CLI.</AlertDescription>
</Alert>Use variant="destructive" for errors. An optional <svg> as the first child renders as the leading icon.