Alert

An inset callout with a status icon, a title, and its description on one surface.

Heads up

You can add components to your app using the command line.

Installation

pnpm dlx @mielui/svelte add alert

Usage

An alert is a notice strip with a status icon, a Title, and a muted Description. The variant tints only the icon, never the surface or its border. Put one button or link directly inside Root for a follow-up action. It sits at the end of the strip and moves under the text when the alert is narrow.

Set icon={false} to omit the default icon, or pass an icon snippet to replace it.

Static notices use announcement="off" by default and announce nothing. 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 variant does not change announcement urgency.

<script lang="ts">
    import * as Alert from '@mielui/svelte/components/alert';
</script>

<Alert.Root variant="success" announcement="polite">
    <Alert.Title>Changes saved</Alert.Title>
    <Alert.Description>Your profile is up to date.</Alert.Description>
</Alert.Root>

Examples

Variants

Maintenance scheduled

Reports will be unavailable Sunday from 02:00 to 03:00 UTC.

Import complete

All 128 contacts are ready to use.

Storage almost full

You have used 9.2 GB of your 10 GB allowance.

Connection lost

Your draft is saved locally. Reconnect before publishing.

With an action

A button or link placed directly in Root becomes the strip's one action. Keep it secondary, and name what it does.

No events yet.

If the snippet is live, browse your site and the first pageview will appear here.

Parts

Title is optional. An alert with only a Description reads as a single line, which suits short notices.

Root, Title and Description render their children and take class. Root also passes div attributes, such as id, to its element.

API reference

Alert.Root

Provides the alert container.

variant

AlertVariant
Status the alert reports. It sets the icon and its tint.

Default 'info'
icon

false | Snippet<[]>
Custom icon, or false to hide it.
announcement

"off" | "polite" | "assertive"
Announcement urgency, independent of appearance. Defaults to off.

Default 'off'
class

(string & (ClassValue | null))
Classes added to the element.
children

Snippet<[]>
Content rendered inside.

Alert.Description

Renders the alert details.

class

string
Classes added to the element.
children

Snippet<[]>
Content rendered inside.

Alert.Title

Renders the alert heading.

class

string
Classes added to the element.
children

Snippet<[]>
Content rendered inside.