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

npx lily-svelte@latest add alert

Install the lily base and `utils` (run once per project).

npx lily-svelte@latest init

Copy 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.

← Accordion Alert Dialog →