Alert

Displays a callout for user attention.

Basic

Success! Your changes have been saved.

This is an alert with title and description.

This one has a description only. No title. No icon.

With Icons

Let's try one with icon, title and a link.

This one has an icon and a description only. No title. But it has a link and a second link.

Success! Your changes have been saved

This is an alert with icon, title and description.

This is a very long alert title that demonstrates how the component handles extended text content and potentially wraps across multiple lines

This is a very long alert description that demonstrates how the component handles extended text content and potentially wraps across multiple lines

This is an extremely long alert title that spans multiple lines to demonstrate how the component handles very lengthy headings while maintaining readability and proper text wrapping behavior

This is an equally long description that contains detailed information about the alert. It shows how the component can accommodate extensive content while preserving proper spacing, alignment, and readability across different screen sizes and viewport widths. This helps ensure the user experience remains consistent regardless of the content length.

Destructive

Something went wrong!

Your session has expired. Please log in again.

Unable to process your payment.

Please verify your billing information and try again.

Check your card details
Ensure sufficient funds
Verify billing address

With Actions

The selected emails have been marked as spam.

This is a very long alert title that demonstrates how the component handles extended text content.

Badge

<script lang="ts">
  import { Alert, AlertAction, AlertTitle, AlertDescription } from '@sveltery/components/alert';
  import { Badge } from '@sveltery/components/badge';
  import { Button } from '@sveltery/components/button';
  import { Example, ExampleWrapper } from '@sveltery/components/example';
  import { IconPlaceholder } from '@sveltery/components/icons';
</script>

{#snippet AlertBasic()}
  <Example title="Basic">
    <div class="mx-auto flex w-full max-w-lg flex-col gap-4">
      <Alert>
        <AlertTitle>Success! Your changes have been saved.</AlertTitle>
      </Alert>
      <Alert>
        <AlertTitle>Success! Your changes have been saved.</AlertTitle>
        <AlertDescription>This is an alert with title and description.</AlertDescription>
      </Alert>
      <Alert>
        <AlertDescription>This one has a description only. No title. No icon.</AlertDescription>
      </Alert>
    </div>
  </Example>
{/snippet}

{#snippet AlertWithIcons()}
  <Example title="With Icons">
    <div class="mx-auto flex w-full max-w-lg flex-col gap-4">
      <Alert>
        <IconPlaceholder
          lucide="CircleAlertIcon"
          tabler="IconExclamationCircle"
          hugeicons="AlertCircleIcon"
          phosphor="WarningCircleIcon"
          remixicon="RiErrorWarningLine"
        />
        <AlertTitle>
          Let's try one with icon, title and a
          <!-- svelte-ignore a11y_invalid_attribute -->
          <a href="#">link</a>.
        </AlertTitle>
      </Alert>
      <Alert>
        <IconPlaceholder
          lucide="CircleAlertIcon"
          tabler="IconExclamationCircle"
          hugeicons="AlertCircleIcon"
          phosphor="WarningCircleIcon"
          remixicon="RiErrorWarningLine"
        />
        <AlertDescription>
          This one has an icon and a description only. No title.
          <!-- svelte-ignore a11y_invalid_attribute -->
          <a href="#">But it has a link</a> and a
          <!-- svelte-ignore a11y_invalid_attribute -->
          <a href="#">second link</a>.
        </AlertDescription>
      </Alert>
      <Alert>
        <IconPlaceholder
          lucide="CircleAlertIcon"
          tabler="IconExclamationCircle"
          hugeicons="AlertCircleIcon"
          phosphor="WarningCircleIcon"
          remixicon="RiErrorWarningLine"
        />
        <AlertTitle>Success! Your changes have been saved</AlertTitle>
        <AlertDescription>This is an alert with icon, title and description.</AlertDescription>
      </Alert>
      <Alert>
        <IconPlaceholder
          lucide="CircleAlertIcon"
          tabler="IconExclamationCircle"
          hugeicons="AlertCircleIcon"
          phosphor="WarningCircleIcon"
          remixicon="RiErrorWarningLine"
        />
        <AlertTitle>
          This is a very long alert title that demonstrates how the component handles extended
          text content and potentially wraps across multiple lines
        </AlertTitle>
      </Alert>
      <Alert>
        <IconPlaceholder
          lucide="CircleAlertIcon"
          tabler="IconExclamationCircle"
          hugeicons="AlertCircleIcon"
          phosphor="WarningCircleIcon"
          remixicon="RiErrorWarningLine"
        />
        <AlertDescription>
          This is a very long alert description that demonstrates how the component handles
          extended text content and potentially wraps across multiple lines
        </AlertDescription>
      </Alert>
      <Alert>
        <IconPlaceholder
          lucide="CircleAlertIcon"
          tabler="IconExclamationCircle"
          hugeicons="AlertCircleIcon"
          phosphor="WarningCircleIcon"
          remixicon="RiErrorWarningLine"
        />
        <AlertTitle>
          This is an extremely long alert title that spans multiple lines to demonstrate how the
          component handles very lengthy headings while maintaining readability and proper text
          wrapping behavior
        </AlertTitle>
        <AlertDescription>
          This is an equally long description that contains detailed information about the
          alert. It shows how the component can accommodate extensive content while preserving
          proper spacing, alignment, and readability across different screen sizes and viewport
          widths. This helps ensure the user experience remains consistent regardless of the
          content length.
        </AlertDescription>
      </Alert>
    </div>
  </Example>
{/snippet}

{#snippet AlertDestructive()}
  <Example title="Destructive">
    <div class="mx-auto flex w-full max-w-lg flex-col gap-4">
      <Alert variant="destructive">
        <IconPlaceholder
          lucide="CircleAlertIcon"
          tabler="IconExclamationCircle"
          hugeicons="AlertCircleIcon"
          phosphor="WarningCircleIcon"
          remixicon="RiErrorWarningLine"
        />
        <AlertTitle>Something went wrong!</AlertTitle>
        <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
      </Alert>
      <Alert variant="destructive">
        <IconPlaceholder
          lucide="CircleAlertIcon"
          tabler="IconExclamationCircle"
          hugeicons="AlertCircleIcon"
          phosphor="WarningCircleIcon"
          remixicon="RiErrorWarningLine"
        />
        <AlertTitle>Unable to process your payment.</AlertTitle>
        <AlertDescription>
          <p>
            Please verify your
            <!-- svelte-ignore a11y_invalid_attribute -->
            <a href="#">billing information</a> and try again.
          </p>
          <ul class="list-inside list-disc">
            <li>Check your card details</li>
            <li>Ensure sufficient funds</li>
            <li>Verify billing address</li>
          </ul>
        </AlertDescription>
      </Alert>
    </div>
  </Example>
{/snippet}

{#snippet AlertWithActions()}
  <Example title="With Actions">
    <div class="mx-auto flex w-full max-w-lg flex-col gap-4">
      <Alert>
        <IconPlaceholder
          lucide="CircleAlertIcon"
          tabler="IconExclamationCircle"
          hugeicons="AlertCircleIcon"
          phosphor="WarningCircleIcon"
          remixicon="RiErrorWarningLine"
        />
        <AlertTitle>The selected emails have been marked as spam.</AlertTitle>
        <AlertAction>
          <Button size="xs">Undo</Button>
        </AlertAction>
      </Alert>
      <Alert>
        <IconPlaceholder
          lucide="CircleAlertIcon"
          tabler="IconExclamationCircle"
          hugeicons="AlertCircleIcon"
          phosphor="WarningCircleIcon"
          remixicon="RiErrorWarningLine"
        />
        <AlertTitle>The selected emails have been marked as spam.</AlertTitle>
        <AlertDescription>
          This is a very long alert title that demonstrates how the component handles extended
          text content.
        </AlertDescription>
        <AlertAction>
          <Badge variant="secondary">Badge</Badge>
        </AlertAction>
      </Alert>
    </div>
  </Example>
{/snippet}

<ExampleWrapper class="lg:grid-cols-1">
  {@render AlertBasic()}
  {@render AlertWithIcons()}
  {@render AlertDestructive()}
  {@render AlertWithActions()}
</ExampleWrapper>

Installation

Install the dependencies

pnpm add cn class-variance-authority

Copy the component

Copy the following files into src/lib/components/ui/alert.

src/lib/components/ui/alert/Alert.svelte

<script lang="ts">
  import type { AlertProps } from './types.js';
  import { cn } from 'cn';
  import { alertVariants } from './variants.js';
  let { children, class: classProp, variant, ...props }: AlertProps = $props();
</script>
<div data-slot="alert" role="alert" {...props} class={cn(alertVariants({ variant }), classProp)}>
  {@render children?.()}
</div>

src/lib/components/ui/alert/AlertAction.svelte

<script lang="ts">
  import type { AlertActionProps } from './types.js';
  import { cn } from 'cn';
  let { children, class: classProp, ...props }: AlertActionProps = $props();
</script>
<div data-slot="alert-action" {...props} class={cn('absolute top-2 right-2', classProp)}>
  {@render children?.()}
</div>

src/lib/components/ui/alert/AlertDescription.svelte

<script lang="ts">
  import type { AlertDescriptionProps } from './types.js';
  import { cn } from 'cn';
  let { children, class: classProp, ...props }: AlertDescriptionProps = $props();
</script>
<div data-slot="alert-description" {...props} class={cn('text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground', classProp)}>
  {@render children?.()}
</div>

src/lib/components/ui/alert/AlertTitle.svelte

<script lang="ts">
  import type { AlertTitleProps } from './types.js';
  import { cn } from 'cn';
  let { children, class: classProp, ...props }: AlertTitleProps = $props();
</script>
<div data-slot="alert-title" {...props} class={cn('font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground', classProp)}>
  {@render children?.()}
</div>

src/lib/components/ui/alert/types.ts

import type { HTMLAttributes } from 'svelte/elements';
import type { VariantProps } from 'class-variance-authority';
import type { alertVariants } from './variants.js';
type NativeAlertProps = HTMLAttributes<HTMLDivElement>;
export type AlertProps = NativeAlertProps & VariantProps<typeof alertVariants>;
export type AlertTitleProps = NativeAlertProps;
export type AlertDescriptionProps = NativeAlertProps;
export type AlertActionProps = NativeAlertProps;

src/lib/components/ui/alert/variants.ts

import { cva } from 'class-variance-authority';
export const alertVariants = cva("grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 group/alert relative w-full", {
  variants: { variant: { default: 'bg-card text-card-foreground', destructive: 'text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current' } },
  defaultVariants: { variant: 'default' },
});

src/lib/components/ui/alert/index.ts

export { default as Alert } from './Alert.svelte';
export { default as AlertTitle } from './AlertTitle.svelte';
export { default as AlertDescription } from './AlertDescription.svelte';
export { default as AlertAction } from './AlertAction.svelte';
export type { AlertProps, AlertTitleProps, AlertDescriptionProps, AlertActionProps } from './types.js';

Update the import paths

Change the imports to match your project setup.

Usage

<script lang="ts">
  import { Alert, AlertAction, AlertDescription, AlertTitle } from '$lib/components/ui/alert';
</script>

<Alert>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>You can add components to your app by copying their source.</AlertDescription>
  <AlertAction>
    <Button variant="outline">Enable</Button>
  </AlertAction>
</Alert>