Alert Dialog

Installation

pnpm dlx shadcn-svelte@latest add https://coss-sv.vercel.app/r/alert-dialog.json

Usage

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

<AlertDialog.Root>
  <AlertDialog.Trigger>Delete Account</AlertDialog.Trigger>
  <AlertDialog.Popup>
    <AlertDialog.Header>
      <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
      <AlertDialog.Description>
        This action cannot be undone. This will permanently delete your account and remove your data
        from our servers.
      </AlertDialog.Description>
    </AlertDialog.Header>
    <AlertDialog.Footer>
      <AlertDialog.Close>Cancel</AlertDialog.Close>
      <AlertDialog.Close>Delete Account</AlertDialog.Close>
    </AlertDialog.Footer>
  </AlertDialog.Popup>
</AlertDialog.Root>

API Reference

AlertDialog.Root

Root component. Wraps AlertDialog.Root from Shards UI.

AlertDialog.Trigger

Trigger button that opens the alert dialog. Wraps AlertDialog.Trigger from Shards UI.

Popup container that displays the alert dialog content. Also exported as AlertDialog.Content.

Prop	Type	Default	Description
`bottomStickOnMobile`	`boolean`	`true`	When true, sticks to the bottom of the screen on mobile devices
`portalProps`	`ComponentProps<typeof AlertDialog.Portal>`	-	Props forwarded to the internal portal (`keepMounted`, `container`, etc.); see the Shards UI Alert Dialog portal API

AlertDialog.Header

Container for the alert dialog title and description.

Unlike Dialog, alert dialog has no AlertDialog.Panel. Put title and description in AlertDialog.Header, actions in AlertDialog.Footer, and use a plain element with class if you need extra body content between them.

Prop	Type	Default	Description
`variant`	`"default" \\| "bare"`	`"default"`	Controls the footer styling. `default` includes border and background, `bare` removes them

Example:

<!-- Default variant (with border and background) -->
<AlertDialog.Footer>
  <AlertDialog.Close>Cancel</AlertDialog.Close>
  <AlertDialog.Close>Delete</AlertDialog.Close>
</AlertDialog.Footer>

<!-- Bare variant (no border or background) -->
<AlertDialog.Footer variant="bare">
  <AlertDialog.Close>Cancel</AlertDialog.Close>
  <AlertDialog.Close>Delete</AlertDialog.Close>
</AlertDialog.Footer>