source

Alert

Persistent inline notifications for status, warnings, errors, and informational messages with icons, actions, and dismissal.

Heads up!

This is an alert with important information.

Variant

Size

Dismissible

Intent

Title

Description

Loading syntax highlighting...

01 Examples

With Icon

Use the `icon` snippet to convey intent visually alongside the title and message.

Deployment complete

Build #347 deployed to production in 42 seconds.

Build failed

TypeScript compilation failed with 3 errors. Check the logs for details.

Loading syntax highlighting...

With Actions

Alerts can include action buttons for immediate user response.

Unsaved changes

You have unsaved changes that will be lost if you navigate away.

Delete workspace?

This action cannot be undone. All projects and data will be permanently removed.

Loading syntax highlighting...

Dismissible

Click the close button to dismiss – click Reset to bring them back.

Welcome back!

You have 5 unread notifications since your last visit.

Trial activated

Your 14-day Pro trial starts now. No credit card required.

Loading syntax highlighting...

02 Customization

Gradient Banner

Use slotClasses to create eye-catching promotional banners.

🚀 New: AI Copilot

Intelligent code suggestions powered by your codebase context.

🎉 Black Friday

50% off all Pro plans. Offer ends Monday.

Loading syntax highlighting...

Glassmorphism

Translucent alerts over rich backgrounds.

Upload complete

12 files processed successfully.

Connection lost

Reconnecting automatically…

Loading syntax highlighting...

Terminal / Monospace

Developer-friendly alerts with a terminal aesthetic.

[OK] Build succeeded

Compiled 847 modules in 1.2s · 0 warnings · 0 errors

[ERR] Process exited

SIGTERM received · pid 4821 · exit code 137

Loading syntax highlighting...

Accent Border

Minimal left-border style that works well in content-heavy layouts.

Tip

Use keyboard shortcuts to speed up your workflow. Press ⌘K to open the command palette.

Deprecation notice

The v1 API will be removed in the next major release. Migrate to v2 before March 2026.

Loading syntax highlighting...

03 Accessibility

Built-in ARIA

Renders with role="alert", ensuring screen readers announce the content as a live region. Dismissible alerts include a close button with aria-label="Dismiss".

Keyboard

The dismiss button is focusable via Tab and activates with Enter / Space. Focus-visible ring follows the component's intent color for clear contrast.

Reduced Motion

Transition durations use the --blocks-duration-fast token, which is automatically shortened when prefers-reduced-motion is enabled.

04 API Reference

15 props

No matching properties

No matching properties

05 Installation

Import

Loading syntax highlighting...

llm.txt