Studio
2

Alert

Installation

pnpm dlx @mielui/svelte add alert

Usage

The theme setting chrome.borders chooses "single" or "double" framing. Double is the default. Single removes the extra frame while preserving content padding, composition, and inset variants.

Set icon={false} to omit the default icon, or supply an icon snippet to replace it. Title and Description remain separate parts.

Static notices use announcement="off" by default. Use announcement="polite" for routine updates, such as a successful save.

Reserve announcement="assertive" for urgent updates that should interrupt. Keep the live region mounted while its content changes. The visual variant does not change announcement urgency.

import * as Alert from '$lib/mielui/components/alert';

<Alert.Root announcement="polite">
  <Alert.Title>Title</Alert.Title>
  <Alert.Description>Description</Alert.Description>
</Alert.Root>

Examples

Status tones

API reference

Alert.Root

Provides the alert container.

Prop Type Default
variant AlertVariant | undefined 'info'
icon false | Snippet<[]> | undefined —
announcement "off" | "assertive" | "polite" | undefined

Announcement urgency, independent of appearance. Defaults to off.

 'off'
class (string & (ClassValue | null)) | undefined —
children Snippet<[]> | undefined —

Alert.Description

Renders the alert details.

Prop Type Default
class string | undefined —
children Snippet<[]> | undefined —

Alert.Title

Renders the alert heading.

Prop Type Default
class string | undefined —
children Snippet<[]> | undefined —