Core UI

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

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

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

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

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 | undefined
false
Dismissible
dismissed
boolean | undefined
false
Dismissed
disabled
boolean | undefined
false
Disabled
extend
Record<string, unknown> | undefined
''
Extend
factory
Factory<AlertBond<AlertBondState<AlertBondProps>>> | undefined
undefined
Factory
children
Snippet<[{ alert: AlertBond<AlertBondState<AlertBondProps>>; }]> | undefined
undefined
Children content snippet
...atomProps
HtmlAtomProps
-
All HTML element props are supported. See [Atom Props](/docs/components/atom#props) for the complete list of inherited properties.

Alert.Title Props

Prop
Type
Default
Description
bond
Bond
undefined
Bond object for component communication
base
Component | Snippet
undefined
Base component or snippet to render
preset
PresetModuleName | string
undefined
Preset module name for styling
variants
VariantDefinition | Function
undefined
Variant definition or function to resolve variants
class
ClassValue | ClassValue[]
undefined
CSS class(es) to apply to the element
as
string
undefined
HTML tag to render as
global
boolean
false
Whether to use global styles
initial
NodeFunction
undefined
Function called on initial render
enter
TransitionFunction
undefined
Transition function for entering
exit
TransitionFunction
undefined
Transition function for exiting
animate
NodeFunction
undefined
Animation function
onmount
NodeFunction
undefined
Function called when element is mounted
ondestroy
NodeFunction
undefined
Function called when element is destroyed
children
Snippet
undefined
Children content snippet

Alert.Actions Props

Prop
Type
Default
Description
bond
Bond
undefined
Bond object for component communication
base
Component | Snippet
undefined
Base component or snippet to render
preset
PresetModuleName | string
undefined
Preset module name for styling
variants
VariantDefinition | Function
undefined
Variant definition or function to resolve variants
class
ClassValue | ClassValue[]
undefined
CSS class(es) to apply to the element
as
string
undefined
HTML tag to render as
global
boolean
false
Whether to use global styles
initial
NodeFunction
undefined
Function called on initial render
enter
TransitionFunction
undefined
Transition function for entering
exit
TransitionFunction
undefined
Transition function for exiting
animate
NodeFunction
undefined
Animation function
onmount
NodeFunction
undefined
Function called when element is mounted
ondestroy
NodeFunction
undefined
Function called when element is destroyed
children
Snippet
undefined
Children content snippet

Alert.Content Props

Prop
Type
Default
Description
bond
Bond
undefined
Bond object for component communication
base
Component | Snippet
undefined
Base component or snippet to render
preset
PresetModuleName | string
undefined
Preset module name for styling
variants
VariantDefinition | Function
undefined
Variant definition or function to resolve variants
class
ClassValue | ClassValue[]
undefined
CSS class(es) to apply to the element
as
string
undefined
HTML tag to render as
global
boolean
false
Whether to use global styles
initial
NodeFunction
undefined
Function called on initial render
enter
TransitionFunction
undefined
Transition function for entering
exit
TransitionFunction
undefined
Transition function for exiting
animate
NodeFunction
undefined
Animation function
onmount
NodeFunction
undefined
Function called when element is mounted
ondestroy
NodeFunction
undefined
Function called when element is destroyed
children
Snippet
undefined
Children content snippet

Alert.Description Props

Prop
Type
Default
Description
bond
Bond
undefined
Bond object for component communication
base
Component | Snippet
undefined
Base component or snippet to render
preset
PresetModuleName | string
undefined
Preset module name for styling
variants
VariantDefinition | Function
undefined
Variant definition or function to resolve variants
class
ClassValue | ClassValue[]
undefined
CSS class(es) to apply to the element
as
string
undefined
HTML tag to render as
global
boolean
false
Whether to use global styles
initial
NodeFunction
undefined
Function called on initial render
enter
TransitionFunction
undefined
Transition function for entering
exit
TransitionFunction
undefined
Transition function for exiting
animate
NodeFunction
undefined
Animation function
onmount
NodeFunction
undefined
Function called when element is mounted
ondestroy
NodeFunction
undefined
Function called when element is destroyed
children
Snippet
undefined
Children content snippet

Alert.Icon Props

Prop
Type
Default
Description
bond
Bond
undefined
Bond object for component communication
base
Component | Snippet
undefined
Base component or snippet to render
preset
PresetModuleName | string
undefined
Preset module name for styling
variants
VariantDefinition | Function
undefined
Variant definition or function to resolve variants
class
ClassValue | ClassValue[]
undefined
CSS class(es) to apply to the element
as
string
undefined
HTML tag to render as
global
boolean
false
Whether to use global styles
initial
NodeFunction
undefined
Function called on initial render
enter
TransitionFunction
undefined
Transition function for entering
exit
TransitionFunction
undefined
Transition function for exiting
animate
NodeFunction
undefined
Animation function
onmount
NodeFunction
undefined
Function called when element is mounted
ondestroy
NodeFunction
undefined
Function called when element is destroyed
children
Snippet
undefined
Children content snippet

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
Previous
Accordion
Next
Avatar