Skip to main content
The Alert component provides a flexible way to display various types of messages including information, success, warning, and error states. It supports icons, titles, descriptions, actions, and dismissal.

​
Structure

The Alert component consists of several subcomponents:
  • Alert.Root - The container that manages alert state
  • Alert.Icon - Optional icon to indicate alert type
  • Alert.Title - Main heading for the alert
  • Alert.Description - Detailed message text
  • Alert.Content - General content container
  • Alert.Actions - Container for action buttons
  • Alert.CloseButton - Button to dismiss the alert

​
Import

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

​
Usage

​
Basic Alert

<Alert.Root variant="info">
  <Alert.Content>Quick tip: Press Ctrl+K to open the command palette.</Alert.Content>
</Alert.Root>

​
Alert with Icon and Title

<Alert.Root variant="success">
  <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>Changes Saved Successfully</Alert.Title>
  <Alert.Description>
    Your profile settings have been updated and synced across all devices.
  </Alert.Description>
</Alert.Root>

​
Dismissible Alert

<script>
  import { Alert, Icon } from '@svelte-atoms/core';
  let dismissed = $state(false);
</script>

<Alert.Root variant="info" 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>Cookie Preferences</Alert.Title>
  <Alert.Description>
    We use cookies to enhance your experience. You can manage your preferences in settings.
  </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>

{#if dismissed}
  <button onclick={() => (dismissed = false)}>Restore Alert</button>
{/if}

​
Alert with Actions

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

<Alert.Root variant="warning">
  <Alert.Icon>
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
      <line x1="12" y1="9" x2="12" y2="13"></line>
      <line x1="12" y1="17" x2="12.01" y2="17"></line>
    </svg>
  </Alert.Icon>
  <Alert.Title>Trial Ending Soon</Alert.Title>
  <Alert.Description>
    Your free trial ends in 3 days. Upgrade now to keep access to premium features.
  </Alert.Description>
  <Alert.Actions>
    <Button variant="primary" size="sm">Upgrade Now</Button>
    <Button variant="ghost" size="sm">Compare Plans</Button>
  </Alert.Actions>
</Alert.Root>

​
Custom Layout

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

{#snippet alertLayout({ children, class: klass, ...args })}
  {@const gridTemplateAreas = `"icon title close-button" ". description description" "actions actions actions"`}
  {@const gridTemplateColumns = `auto 1fr auto`}
  
  <div
    {...args}
    class={cn(klass, 'grid items-center')}
    style:grid-template-areas={gridTemplateAreas}
    style:grid-template-columns={gridTemplateColumns}
  >
    {@render children?.()}
  </div>
{/snippet}

<Alert.Root base={alertLayout} variant="error">
  <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>Payment Failed</Alert.Title>
  <Alert.Description>
    We couldn't process your payment. Please check your payment method and try again.
  </Alert.Description>
</Alert.Root>

​
API Reference

​
Alert.Root

The root container component that manages the alert’s state and appearance.
​
variant
'info' | 'success' | 'warning' | 'error'
The visual style variant of the alert.
​
dismissible
boolean
default:"false"
Whether the alert can be dismissed by the user.
​
dismissed
boolean
default:"false"
Controls the dismissed state of the alert. Use bind:dismissed for two-way binding.
​
disabled
boolean
default:"false"
Whether the alert is in a disabled state.
​
base
Component
Base component to customize the alert layout.
​
class
string
Additional CSS classes to apply.
​
factory
Factory<AlertBond>
Optional factory function to create a custom AlertBond instance.
​
children
Snippet<[{ alert: AlertBond }]>
Render prop that receives the alert bond instance.

​
Alert.Icon

Displays an icon to visually indicate the alert type.
​
class
string
Additional CSS classes to apply.
​
children
Snippet
The icon content (typically an SVG).

​
Alert.Title

The main heading for the alert message.
​
class
string
Additional CSS classes to apply.
​
children
Snippet
The title text.

​
Alert.Description

Detailed description or explanation of the alert.
​
class
string
Additional CSS classes to apply.
​
children
Snippet
The description text.

​
Alert.Content

A general-purpose container for alert content.
​
class
string
Additional CSS classes to apply.
​
children
Snippet
The content to display.

​
Alert.Actions

Container for action buttons within the alert.
​
class
string
Additional CSS classes to apply.
​
children
Snippet
The action buttons (typically Button components).

​
Alert.CloseButton

Button to dismiss the alert. Only functional when dismissible is true.
​
class
string
Additional CSS classes to apply.
​
children
Snippet
The button content (typically a close icon).

​
Variants

The Alert component supports four semantic variants:
  • info - For informational messages and tips
  • success - For successful operations and confirmations
  • warning - For warnings and cautionary messages
  • error - For errors and critical issues
Each variant has distinct styling to help users quickly identify the message type.

​
Styling

The Alert component uses the following preset keys for styling:
  • alert.root - Applied to the root container
  • alert.icon - Applied to the icon
  • alert.title - Applied to the title
  • alert.description - Applied to the description
  • alert.content - Applied to the content container
  • alert.actions - Applied to the actions container
  • alert.close-button - Applied to the close button
Customize appearance by:
  1. Using the class prop for custom classes
  2. Defining custom styles for preset keys in your theme
  3. Using the base prop for custom layouts

​
Accessibility

  • Alerts should have appropriate ARIA roles (alert, status, or alertdialog)
  • Important alerts should use role="alert" to announce to screen readers
  • Close buttons should have descriptive aria-label attributes
  • Consider keyboard navigation for dismissible alerts

​
Accessible Example

<Alert.Root variant="error" dismissible role="alert" aria-live="assertive">
  <Alert.Title>Error</Alert.Title>
  <Alert.Description>
    Unable to save your changes. Please try again.
  </Alert.Description>
  <Alert.CloseButton aria-label="Dismiss error message">
    <Icon class="h-full" src={CloseIcon} />
  </Alert.CloseButton>
</Alert.Root>

​
Related Components

  • Toast - For temporary notifications
  • Dialog - For modal alerts requiring user action
  • Badge - For small status indicators

Build docs developers (and LLMs) love

Get started for freeTalk to us