Alert

A persistent message about the surrounding content — a warning above a form, an explanation of an empty state.

Not a toast: a toast is transient and lives at the edge of the screen, an Alert sits in the layout. variant="destructive" renders role="alert" so it is announced when it appears; the informational variants are announced only when the user reaches them, which is right for text that was there all along.

Feedback

<script lang="ts">
	import { Alert } from '@l4st/driftwood';
</script>

Light	Dark

Props

Prop	Type	Default	What it does
variant	Variant	'default'	destructive also sets role="alert", so it is announced when it appears.
title	string	—	Bold first line. Omit for a single-line message.
icon	Component | null	—	Replaces the variant's icon. Pass null for no icon at all.
class	string	—	Merged with the component's own classes, last — so yours win.
children required	Snippet	—	The content.

Example

The markup behind the screenshot above, lifted from src/routes/shots/ — so it compiles, and it is exactly what produced the image.

<Alert title="Scan finished" variant="success">2.56M files indexed in 4m 12s.</Alert>
<Alert title="Volume nearly full" variant="warning">volume1 is at 94% capacity.</Alert>
<Alert variant="destructive">The last scan could not read /volume1/private.</Alert>

Feedback · Badge · Progress · Spinner · Skeleton · Toaster · Avatar · Image

---

← All components · Getting started · Theming · source