Alert

Display important messages and notifications to users. Alerts provide contextual feedback for user actions.

Installation

Import

import { Alert } from '@svelte-atoms/core/alert';

Preset Configuration

Customize the alert appearance using presets

You can customize the default styles for Alert components by defining presets in your configuration:

Available Preset Keys

alert - Root container styles and variants
alert.icon - Icon container styles
alert.title - Title text styles
alert.description - Description text styles
alert.content - Content container styles
alert.actions - Actions container styles
alert.close-button - Close button styles

Examples

Explore different alert variations and use cases

Basic Alert

Simple alert with icon and title

New Feature Available

We've added dark mode support to your dashboard. Try it out in the settings panel.

Code

<script>
  import { Alert } from '@svelte-atoms/core';
</script>

<Alert.Root variant="primary">
  <Alert.Icon>
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <circle cx="12" cy="12" r="10"></circle>
      <path d="M12 16v-4M12 8h.01"></path>
    </svg>
  </Alert.Icon>
  <Alert.Title>New Feature Available</Alert.Title>
  <Alert.Description>
    We've added dark mode support to your dashboard.
  </Alert.Description>
</Alert.Root>

Alert Variants

Different alert styles for various contexts

Primary Alert

This is a primary alert message for important information.

Secondary Alert

This is a secondary alert for general notifications.

Destructive Alert

This is a destructive alert for errors and warnings.

Outline Alert

This is an outline alert with a border.

Code

<Alert.Root variant="primary">
  <Alert.Icon>
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <circle cx="12" cy="12" r="10"></circle>
      <path d="M12 16v-4M12 8h.01"></path>
    </svg>
  </Alert.Icon>
  <Alert.Title>Primary Alert</Alert.Title>
  <Alert.Description>This is a primary alert message.</Alert.Description>
</Alert.Root>

<Alert.Root variant="secondary">
  <Alert.Icon>
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
      <polyline points="22 4 12 14.01 9 11.01"></polyline>
    </svg>
  </Alert.Icon>
  <Alert.Title>Secondary Alert</Alert.Title>
  <Alert.Description>This is a secondary alert message.</Alert.Description>
</Alert.Root>

<Alert.Root variant="destructive">
  <Alert.Icon>
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <circle cx="12" cy="12" r="10"></circle>
      <line x1="15" y1="9" x2="9" y2="15"></line>
      <line x1="9" y1="9" x2="15" y2="15"></line>
    </svg>
  </Alert.Icon>
  <Alert.Title>Destructive Alert</Alert.Title>
  <Alert.Description>This is a destructive alert message.</Alert.Description>
</Alert.Root>

Dismissible Alert

Alert with close button

Cookie Preferences

We use cookies to enhance your experience. You can manage your preferences in settings.

Code

<script>
  let dismissed = $state(false);
</script>

<Alert.Root variant="primary" dismissible bind:dismissed>
  <Alert.Icon>
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <circle cx="12" cy="12" r="10"></circle>
      <path d="M12 16v-4M12 8h.01"></path>
    </svg>
  </Alert.Icon>
  <Alert.Title>Dismissible Alert</Alert.Title>
  <Alert.Description>
    You can dismiss this alert by clicking the close button.
  </Alert.Description>
  <Alert.CloseButton>
    <Icon class="h-full">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <line x1="18" y1="6" x2="6" y2="18"></line>
        <line x1="6" y1="6" x2="18" y2="18"></line>
      </svg>
    </Icon>
  </Alert.CloseButton>
</Alert.Root>

Alert with Actions

Alert with action buttons

System Update Available

A new version is ready to install. Update now to get the latest features and security improvements.

Code

<Alert.Root variant="primary">
  <Alert.Icon>
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
      <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
    </svg>
  </Alert.Icon>
  <Alert.Title>System Update Available</Alert.Title>
  <Alert.Description>
    A new version is ready to install.
  </Alert.Description>
  <Alert.Actions>
    <Button variant="primary" size="sm">Update Now</Button>
    <Button variant="ghost" size="sm">Remind Me Later</Button>
  </Alert.Actions>
</Alert.Root>

API Reference

Alert.Root Props

Prop

Type

Default

Description

dismissible

boolean

false

Dismissible

dismissed

boolean

false

Dismissed

disabled

boolean

false

Disabled

extend

Record<string, unknown>

Extend

factory

Factory<AlertBond>

undefined

Factory

Alert.Title Props

Prop

Type

Default

Description

Alert.Actions Props

Prop

Type

Default

Description

Alert.Content Props

Prop

Type

Default

Description

Alert.Description Props

Prop

Type

Default

Description

Alert.Icon Props

Prop

Type

Default

Description

Accessibility

Built-in Accessibility Features

• Uses appropriate ARIA role attributes
• Semantic HTML structure with proper heading hierarchy
• Sufficient color contrast ratios for all variants
• Keyboard accessible dismiss button with focus indicators
• Screen reader announcements for alert content
• Support for assistive technologies

Accordion

Avatar