Alert

Preview

Success!

Your changes have been saved successfully.

View Details

New Feature Available

We’ve added dark mode support! Check it out in your settings.

Learn More

⚠️

Warning

Your subscription expires in 3 days.

Renew

Error Occurred

Unable to save changes. Please try again.

Retry

🎉

Welcome to the platform!

Take a tour to discover all the amazing features we have to offer.

Start Tour

Code

---
import Alert from '{{ aliases.components }}/Alert.astro'
import Button from '{{ aliases.components }}/Button.astro'
---

<!-- Success Alert with default icon -->
<Alert intent="success" variant="default" dismissible class="mb-4">
  <strong>Success!</strong>
  <p slot="description">Your changes have been saved successfully.</p>
  <Button slot="action" variant="outlined" intent="success" size="small">View Details</Button>
</Alert>

<!-- Warning Alert with custom icon -->
<Alert intent="warning" variant="filled" size="lg" class="mb-4">
  <span slot="icon">⚠️</span>
  <strong>Warning</strong>
  <p slot="description">Your subscription will expire in 3 days. Please renew to continue using all features.</p>
  <Button slot="action" variant="outlined" intent="warning" size="small">Renew Now</Button>
</Alert>

<!-- Danger Alert with subtle variant -->
<Alert intent="danger" variant="subtle" dismissible class="mb-4">
  <strong>Error Occurred</strong>
  <p slot="description">Unable to save your changes. Please try again or contact support if the problem persists.</p>
  <Button slot="action" variant="text" intent="danger" size="small">Retry</Button>
</Alert>

<!-- Info Alert with outlined variant -->
<Alert intent="info" variant="outlined" icon={false}>
  <strong>New Feature Available</strong>
  <p slot="description">We've added dark mode support! Check it out in your settings.</p>
  <Button slot="action" variant="outlined" intent="info" size="small">Learn More</Button>
</Alert>

Install

npx ui-gen add alert

---

Properties

intent

type: string

options: info, success, warning, danger

default: info

Controls the semantic meaning and color scheme of the alert.

variant

type: string

options: default, filled, outlined, subtle

default: default

• default - Standard background with border
• filled - Bold filled background
• outlined - Border only with transparent background
• subtle - Minimal styling with subtle background

size

type: string

options: sm, md, lg

default: md

Controls the padding and text size of the alert.

dismissible

type: boolean

default: false

When true, shows a close button that allows users to dismiss the alert.

icon

type: boolean

default: true

When true, shows the default icon for the intent. Set to false to hide the default icon (you can still provide a custom icon via the icon slot).

Slots

Default slot

The main title/heading content of the alert.

icon

Custom icon content. Overrides the default icon when provided.

description

Secondary descriptive text for the alert.

action

Action buttons or links (typically placed on the right side).

Examples

Basic Alert

<Alert intent="success">
  Operation completed successfully!
</Alert>

Alert with Description

<Alert intent="warning">
  <strong>Warning</strong>
  <p slot="description">This action cannot be undone.</p>
</Alert>

Dismissible Alert with Action

<Alert intent="info" dismissible>
  <strong>New Update Available</strong>
  <p slot="description">Version 2.0 includes new features and bug fixes.</p>
  <Button slot="action" variant="outlined" intent="info" size="small">
    Update Now
  </Button>
</Alert>

Custom Icon Alert

<Alert intent="success" icon={false}>
  <span slot="icon">🎉</span>
  <strong>Congratulations!</strong>
  <p slot="description">You've completed all tasks.</p>
</Alert>

Filled Variant

<Alert intent="danger" variant="filled">
  <strong>Critical Error</strong>
  <p slot="description">System backup failed. Please contact support.</p>
  <Button slot="action" variant="outlined" intent="danger" size="small">
    Contact Support
  </Button>
</Alert>

Accessibility

This Alert component is fully WCAG 2.1 AA compliant:

♿ Color Contrast

• 4.5:1+ contrast ratio for all text combinations
• Improved color palette using amber instead of yellow for better contrast
• Dark mode support with appropriate contrast adjustments

🎯 ARIA Support

• role="alert" for screen reader announcements
• aria-label on dismiss button
• aria-hidden="true" on decorative icons

⌨️ Keyboard Navigation

• Dismiss button is focusable and keyboard accessible
• Proper focus indicators with visible outlines
• Tab order follows logical flow

📱 Screen Reader Support

• Semantic HTML structure
• Descriptive button labels
• Alert role ensures important messages are announced

🎨 Visual Accessibility

• High contrast borders and backgrounds
• Clear visual hierarchy
• Consistent spacing and typography

The component automatically handles focus management and provides clear visual feedback for all interactive elements.