Alert Dialog
A dialog that requires user response to proceed.
<script lang="ts">
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogPopup,
AlertDialogTitle,
AlertDialogTrigger,
} from "coss-svelte";
</script>
<AlertDialog>
<AlertDialogTrigger class="cn-button-destructive-outline">Delete Account</AlertDialogTrigger>
<AlertDialogPopup>
<AlertDialogHeader>
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
<AlertDialogDescription>
This action cannot be undone. This will permanently delete your account and remove your
data from our servers.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction>Delete Account</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogPopup>
</AlertDialog>
Installation
Install the component package, shared coss-svelte theme, and Bits UI peer.
npm install coss-svelte @coss-svelte/theme bits-uiUsage
Import the Svelte component exports directly from the package.
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, AlertDialogTitle, AlertDialogTrigger } from "coss-svelte";Anatomy
- AlertDialog
- AlertDialogAction
- AlertDialogCancel
- AlertDialogDescription
- AlertDialogFooter
- AlertDialogHeader
- AlertDialogPopup
- AlertDialogTitle
- AlertDialogTrigger
API Reference
AlertDialog
A dialog that requires user response to proceed.
| Prop | Type | Default | Description |
|---|---|---|---|
bind:open | boolean | false | Open state for the popup or disclosure. Bind with `bind:open`. |
trigger | string | "Open alert dialog" | Fallback trigger text rendered when custom children are not provided. |
title | string | "" | Title text rendered by the component's built-in fallback layout. |
description | string | "" | Supporting text rendered by the component's built-in fallback layout. |
children : Snippet<[]>Inherits from Bits UI AlertDialog.Root.
AlertDialogAction
Renders the primary action for the parent component.
children : Snippet<[]>child : Snippet<[{ props: Record<string, unknown> }]>bind:ref : HTMLElement | nullInherits from Bits UI AlertDialog.Action.
AlertDialogCancel
Renders a cancellation action for the parent component.
children : Snippet<[]>child : Snippet<[{ props: Record<string, unknown> }]>bind:ref : HTMLElement | nullInherits from Bits UI AlertDialog.Cancel.
AlertDialogDescription
Provides supporting copy for the parent component.
children : Snippet<[]>bind:ref : HTMLElement | nullInherits from Bits UI AlertDialog.Description.
AlertDialogHeader
Groups heading content for the parent component.
children : Snippet<[]>Inherits from Svelte <div> attributes.
AlertDialogPopup
Renders the floating or modal surface for the parent component.
| Prop | Type | Default | Description |
|---|---|---|---|
portalProps | { disabled?: boolean; to?: PortalTarget } | {} | Configures the exact Bits Portal target (`to`) or renders inline when `disabled`. |
children : Snippet<[]>bind:ref : HTMLElement | nullInherits from Bits UI AlertDialog.Content.
AlertDialogTitle
Names the parent surface or section.
children : Snippet<[]>bind:ref : HTMLElement | nullInherits from Bits UI AlertDialog.Title.
AlertDialogTrigger
Renders the control that opens, closes, or selects related content.
children : Snippet<[]>child : Snippet<[{ props: Record<string, unknown> }]>bind:ref : HTMLElement | nullInherits from Bits UI AlertDialog.Trigger.
Implementation Details
- Status
- Stable
- Foundation
- bits
- Category
- Overlays & Popups
- Particles
- 2