8.0k New

Alert

Previous Next

Displays a callout for user attention.

Epicenter

Local-first, open source apps

Special Sponsor 
<script lang="ts">
  import CircleCheckIcon from "@lucide/svelte/icons/circle-check";
  import InfoIcon from "@lucide/svelte/icons/info";
  import * as Alert from "$lib/components/ui/alert/index.js";
</script>
 
<div class="grid w-full max-w-md items-start gap-4">
  <Alert.Root>
    <CircleCheckIcon />
    <Alert.Title>Payment successful</Alert.Title>
    <Alert.Description>
      Your payment of $29.99 has been processed. A receipt has been sent to your
      email address.
    </Alert.Description>
  </Alert.Root>
  <Alert.Root>
    <InfoIcon />
    <Alert.Title>New feature available</Alert.Title>
    <Alert.Description>
      We've added dark mode support. You can enable it in your account settings.
    </Alert.Description>
  </Alert.Root>
</div>

Installation 

pnpm dlx shadcn-svelte@latest add alert

Usage 

<script lang="ts">
  import * as Alert from "$lib/components/ui/alert/index.js";
</script>
<Alert.Root>
  <InfoIcon />
  <Alert.Title>Heads up!</Alert.Title>
  <Alert.Description>
    You can add components and dependencies to your app using the cli.
  </Alert.Description>
  <Alert.Action>
    <Button variant="outline">Enable</Button>
  </Alert.Action>
</Alert.Root>

Basic

A basic alert with an icon, title and description.

<script lang="ts">
  import CircleCheckIcon from "@lucide/svelte/icons/circle-check";
  import * as Alert from "$lib/components/ui/alert/index.js";
</script>
 
<Alert.Root class="max-w-md">
  <CircleCheckIcon />
  <Alert.Title>Account updated successfully</Alert.Title>
  <Alert.Description>
    Your profile information has been saved. Changes will be reflected
    immediately.
  </Alert.Description>
</Alert.Root>

Destructive

Use variant="destructive" to create a destructive alert.

<script lang="ts">
  import CircleAlertIcon from "@lucide/svelte/icons/circle-alert";
  import * as Alert from "$lib/components/ui/alert/index.js";
</script>
 
<Alert.Root variant="destructive" class="max-w-md">
  <CircleAlertIcon />
  <Alert.Title>Payment failed</Alert.Title>
  <Alert.Description>
    Your payment could not be processed. Please check your payment method and
    try again.
  </Alert.Description>
</Alert.Root>

Action

Use Alert.Action to add a button or other action element to the alert.

<script lang="ts">
  import * as Alert from "$lib/components/ui/alert/index.js";
  import { Button } from "$lib/components/ui/button/index.js";
</script>
 
<Alert.Root class="max-w-md">
  <Alert.Title>Dark mode is now available</Alert.Title>
  <Alert.Description
    >Enable it under your profile settings to get started.</Alert.Description
  >
  <Alert.Action>
    <Button size="xs" variant="default">Enable</Button>
  </Alert.Action>
</Alert.Root>

Custom Colors

You can customize the alert colors by adding custom classes such as bg-amber-50 dark:bg-amber-950 to the Alert.Root component.

<script lang="ts">
  import TriangleAlertIcon from "@lucide/svelte/icons/triangle-alert";
  import * as Alert from "$lib/components/ui/alert/index.js";
</script>
 
<Alert.Root
  class="max-w-md border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-50"
>
  <TriangleAlertIcon />
  <Alert.Title>Your subscription will expire in 3 days.</Alert.Title>
  <Alert.Description>
    Renew now to avoid service interruption or upgrade to a paid plan to
    continue using the service.
  </Alert.Description>
</Alert.Root>