Alert

Alert surfaces a short, contextual message that calls for the user's attention without interrupting the flow of the page. Use it for inline status, warnings, and confirmations. Anatomy: Alert (role="alert" container) wraps an optional leading icon, AlertTitle (headline), and AlertDescription (supporting copy).

Variants

default reads as neutral on the page background. destructive is for an error or a failed action. secondary is the same message on a card surface, where bg-card would be invisible — the variant is chosen by what is behind the alert, not by how loud the message is.

Payouts move to Mondays

From 1 September, settled funds leave the account at the start of the week instead of the end.

Card declined

The processor rejected the payment method. Nothing was charged.

Inside a card

Verification pending

Payouts are held until the business details are confirmed.

<Alert class="w-full max-w-xl">
	<Info class="size-4" />
	<AlertTitle>Payouts move to Mondays</AlertTitle>
	<AlertDescription>
		From 1 September, settled funds leave the account at the start of the week instead
		of the end.
	</AlertDescription>
</Alert>

<Alert variant="destructive" class="w-full max-w-xl">
	<XCircle class="size-4" />
	<AlertTitle>Card declined</AlertTitle>
	<AlertDescription>
		The processor rejected the payment method. Nothing was charged.
	</AlertDescription>
</Alert>

<Card class="w-full max-w-xl">
	<CardHeader>
		<CardTitle>Inside a card</CardTitle>
	</CardHeader>
	<CardContent>
		<Alert variant="secondary">
			<AlertTriangle class="size-4" />
			<AlertTitle>Verification pending</AlertTitle>
			<AlertDescription
				>Payouts are held until the business details are confirmed.</AlertDescription
			>
		</Alert>
	</CardContent>
</Card>

Title only

AlertDescription is optional. Drop it when the title already says the whole thing — a description that restates the title in longer words makes the alert look more serious than it is.

Draft saved automatically

API

`Alert`

Prop	Type	Default	Description
`children` required	`import('svelte').Snippet`		Alert content — typically an icon, `AlertTitle`, and `AlertDescription`.
`variant`	`'default'\|'secondary'\|'destructive'`	`'default'`	Visual tone of the alert. `default` reads as neutral/informational on the page background; `secondary` is the same message sitting on a `card` surface, where `bg-card` would be invisible; `destructive` signals an error or a failed action.
`class`	`string`		Additional Tailwind classes merged onto the container.

`AlertTitle`

Headline for an Alert. Renders as an <h5>.

Prop	Type	Default	Description
`children` required	`import('svelte').Snippet`		Title content.
`class`	`string`		Additional Tailwind classes merged onto the element.

`AlertDescription`

Supporting copy for an Alert, rendered below the AlertTitle.

Prop	Type	Default	Description
`children` required	`import('svelte').Snippet`		Description content.
`class`	`string`		Additional Tailwind classes merged onto the element.