Alert

A callout for a message the reader should not miss.

Default
{ui alert,
	title: 'Heads up',
	description: 'An alert with an icon, a title and a description.',
	icon: 'info',
/}

An alert is drawn with role="alert", so a screen reader announces it when it appears. That suits a message swapped in by HTMX after a save, and is too loud for static page text: use a card there.

Destructive
{ui alert,
	title: 'Something went wrong',
	description: 'The destructive variant.',
	icon: 'circle-alert',
	variant: 'destructive',
/}
Success, warning and info
<div class="flex flex-col gap-4">
	{ui alert,
		title: 'Saved',
		description: 'The success variant.',
		icon: 'circle-check',
		variant: 'success',
	/}
	{ui alert,
		title: 'Heads up',
		description: 'The warning variant.',
		icon: 'triangle-alert',
		variant: 'warning',
	/}
	{ui alert,
		title: 'New version',
		description: 'The info variant.',
		icon: 'info',
		variant: 'info',
	/}
</div>

The three status variants colour the text and icon with the success, warning and info tokens, so a flash message after a save can say how it went. Pick the variant on the server and return the alert as the swapped-in fragment.

Title only
{ui alert, title: 'Saved', icon: 'check' /}

Title and description are both optional. The icon is the only other part, and it takes the alert's text colour.

Params

Param Default Description
title null the bold first line
description null muted text under the title
variant null destructive, success, warning or info
icon null an icon name, before the text
class '' added to alert
attrs [] any other attributes, e.g. ['id' => 'flash']