Alert ported

A persistent message that helps people recover or continue.

A persistent message that helps people recover or continue.

Live specimen

Loading demo…

Guidance

When to use

Persistent, in-flow messages about a page or form, such as an expiring card.
Status that changes over time, where one alert should morph between tones.
Dismissible notices that should collapse and close the gap below them.

When not to use

Use toast or toast-stack for transient results of an action.
Use empty-state when there is no content to show.
Use dialog when people must respond before continuing.

Installation

pnpm dlx shadcn-svelte@latest add @arcui/alert

Usage

<script lang="ts">
  import { Alert } from '$lib/components/alert';
</script>

<Alert tone="warning" title="Card expires soon" ondismiss={() => track("dismissed")}>
      Update your payment method before March 1 to avoid interruption.
    </Alert>

Variants & Examples

Default

Standard appearance and configuration.

<Alert tone="warning" title="Card expires soon" ondismiss={() => track("dismissed")}>
      Update your payment method before March 1 to avoid interruption.
    </Alert>

API Reference

Prop	Type	Default	Description
`title`	`string`	–	(Required) Headline. A new title rises in over the old one.
`children`	`Snippet`	–	Details under the title. String children crossfade when they change.
`open`	`boolean`	–	Controls presence. Hiding collapses the height and fades it out.
`onDismiss`	`() => void`	–	Shows a dismiss button. Uncontrolled alerts collapse first, then call this.
`...props`	`HTMLAttributes<HTMLDivElement>`	–	Forwarded to the alert element, such as className and id.

Keyboard Interactions

Key	Action
`Enter / Space`	Activates the dismiss button when present.

Accessibility

Danger alerts use role="alert" and interrupt; other tones use role="status" and announce politely.
Outgoing copies are aria-hidden while they fade, so the live region reads only the current text.
The dismiss button is labelled "Dismiss: <title>"; the tone icon is aria-hidden.

Motion

- Presence collapses or expands the height on a smooth spring with a fade, so content below closes the gap. - Tone changes morph the icon through a small scale and blur; copy changes rise in while the height springs to fit. - Reduced motion swaps content with short fades and no height animation.

Notes for AI

Use for persistent, in-flow messages tied to a page or form. Use toast or toast-stack for transient results of an action.
Keep one Alert mounted and change tone, title, and children to morph between states instead of swapping components.

Source of truth: registry/components/alert/alert.tsx