Feedback

Alert

Display contextual feedback messages to the user. Alerts support titles, descriptions, icons, action buttons, close functionality, and multiple visual variants.

Playground

Experiment with different props in real-time.

Heads up!

You can add components to your app using the CLI.

Color

Variant

Orientation

Title

Description

Icon

Close button

Basic Usage

Import and use the Alert component with a title and description.

Heads up!

You can add components to your app using the CLI.

<script lang="ts">
  import { Alert } from 'sv5ui';
</script>

<Alert
  title="Heads up!"
  description="You can add components to your app using the CLI."
/>

Variants

4 visual styles to match the context of your alert.

Solid

This is a solid alert.

Outline

This is an outline alert.

Soft

This is a soft alert.

Subtle

This is a subtle alert.

<Alert variant="solid" title="Solid" description="This is a solid alert." />
<Alert variant="outline" title="Outline" description="This is an outline alert." />
<Alert variant="soft" title="Soft" description="This is a soft alert." />
<Alert variant="subtle" title="Subtle" description="This is a subtle alert." />

Colors

Use semantic colors to convey different types of feedback.

Success

Your changes have been saved.

Warning

Your session is about to expire.

Error

Something went wrong. Please try again.

Info

A new version is available.

<Alert color="success" title="Success" description="Your changes have been saved." icon="lucide:check-circle" />
<Alert color="warning" title="Warning" description="Your session is about to expire." icon="lucide:alert-triangle" />
<Alert color="error" title="Error" description="Something went wrong. Please try again." icon="lucide:x-circle" />
<Alert color="info" title="Info" description="A new version is available." icon="lucide:info" />

With Icon

Add a leading icon using the icon prop with any Iconify icon name.

Update available

A new software update is available for download.

<Alert
  title="Update available"
  description="A new software update is available for download."
  icon="lucide:download"
  color="info"
/>

With Actions

Add action buttons using the actions prop.

Confirm action

Are you sure you want to proceed with this action?

<Alert
  title="Confirm action"
  description="Are you sure you want to proceed with this action?"
  icon="lucide:alert-triangle"
  color="warning"
  :actions={[
    { label: 'Cancel', variant: 'outline', color: 'surface', size: 'xs' },
    { label: 'Confirm', variant: 'solid', color: 'warning', size: 'xs' }
  ]}
/>

Closable

Allow users to dismiss the alert with a close button using close and onClose.

Dismissible alert

Click the close button to dismiss this alert.

<script lang="ts">
  import { Alert, Button } from 'sv5ui';

  let alertOpen = $state(true);
</script>

{#if alertOpen}
  <Alert
    title="Dismissible alert"
    description="Click the close button to dismiss this alert."
    close
    onClose={() => (alertOpen = false)}
  />
{/if}

{#if !alertOpen}
  <Button
    label="Show alert"
    size="sm"
    variant="outline"
    onclick={() => (alertOpen = true)}
  />
{/if}

Vertical Orientation

Use orientation="vertical" for a stacked layout.

Vertical layout

This alert uses a vertical orientation for a stacked layout.

<Alert
  orientation="vertical"
  title="Vertical layout"
  description="This alert uses a vertical orientation for a stacked layout."
  icon="lucide:layout"
  color="tertiary"
  :actions={[
    { label: 'Learn more', variant: 'outline', color: 'tertiary', size: 'xs' }
  ]}
/>

UI Slots

Use the ui prop to override classes on specific internal elements of the Alert.

Slot	Description
`root`	Outermost wrapper element — controls overall layout, padding, and border
`wrapper`	Inner content wrapper — controls flex layout direction and spacing
`title`	Alert title text — controls font size, weight, and color
`description`	Alert description text — controls font size and opacity
`icon`	Leading icon element — controls icon size and color
`avatar`	Avatar element when using avatar prop — controls avatar styling
`actions`	Action buttons container — controls button layout and spacing
`close`	Close button element — controls close icon size and position

Snippets

Use Svelte 5 snippets to customize specific parts of the Alert.

Snippet	Type	Description
`leading`	`Snippet`	Custom leading content — replaces the default icon/avatar area
`titleSlot`	`Snippet`	Custom title content — replaces the default title text
`descriptionSlot`	`Snippet`	Custom description content — replaces the default description text
`actionsSlot`	`Snippet`	Custom actions area — replaces the default action buttons
`closeSlot`	`Snippet`	Custom close button — replaces the default close icon

Props

Prop	Type	Default	Description
`as`	`keyof HTMLElementTagNameMap`	`'div'`	HTML element to render as
`title`	`string`	`-`	Alert title text
`description`	`string`	`-`	Alert description text
`icon`	`string`	`-`	Iconify icon name displayed as leading element
`avatar`	`AvatarProps`	`-`	Avatar props (used when icon is not provided)
`color`	`Color`	`'primary'`	Color scheme of the alert
`variant`	`'solid' \| 'outline' \| 'soft' \| 'subtle'`	`'solid'`	Visual style variant
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Layout orientation of the alert content
`open`	`boolean`	`true`	Whether the alert is visible
`close`	`boolean \| ButtonProps`	`false`	Show a close button, or pass ButtonProps to customize it
`closeIcon`	`string`	`'lucide:x'`	Iconify icon name for the close button
`actions`	`ButtonProps[]`	`-`	Array of action button props
`onClose`	`() => void`	`-`	Callback fired when the close button is clicked
`class`	`string`	`-`	Additional CSS classes
`ui`	`Record<Slot, Class>`	`-`	Override classes on internal UI slots

Tabs Progress