Alert

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @force-ui-svelte/alert
Copy

Usage#

Copy<script lang="ts">
  import * as Alert from "$lib/components/ui/alert/index.js";
</script>

Copy<Alert.Root>
  <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>Enable</button>
  </Alert.Action>
</Alert.Root>

Composition#

Use the following composition to build an Alert:

CopyAlert.Root
├── Icon
├── Alert.Title
├── Alert.Description
└── Alert.Action

Examples#

Basic#

A basic alert with an icon, title and description.

Destructive#

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

Status Variants#

Use variant="warning", variant="success", or variant="info" for semantic status alerts.

Action#

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

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.

API Reference#

Alert.Root#

The Alert.Root component displays a callout for user attention.

Alert.Title#

The Alert.Title component displays the title of the alert.

Alert.Description#

The Alert.Description component displays the description or content of the alert.

Alert.Action#

The Alert.Action component displays an action element (like a button) positioned absolutely in the top-right corner of the alert.