Alert Dialog

A modal window that alerts users with important information and awaits their acknowledgment or action.

	<script lang="ts">
  import { AlertDialog } from "bits-ui";
  import { flyAndScale } from "@/utils/index.js";
  import { fade } from "svelte/transition";
</script>
 
<AlertDialog.Root>
  <AlertDialog.Trigger
    class="inline-flex h-12 items-center
  justify-center whitespace-nowrap rounded-input bg-dark px-[21px]
  text-[15px] font-semibold text-background shadow-mini transition-all hover:bg-dark/95 active:scale-98"
  >
    Subscribe
  </AlertDialog.Trigger>
  <AlertDialog.Portal>
    <AlertDialog.Overlay
      transition={fade}
      transitionConfig={{ duration: 150 }}
      class="fixed inset-0 z-50 bg-black/80"
    />
    <AlertDialog.Content
      transition={flyAndScale}
      class="fixed left-[50%] top-[50%] z-50 grid w-full max-w-[94%] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-card-lg border bg-background p-7 shadow-popover outline-none sm:max-w-lg md:w-full"
    >
      <div class="flex flex-col gap-4 pb-6">
        <AlertDialog.Title class="text-lg font-semibold tracking-tight"
          >Confirm your transaction</AlertDialog.Title
        >
        <AlertDialog.Description class="text-sm text-foreground-alt">
          This action cannot be undone. This will initiate a monthly wire in the
          amount of $10,000 to Huntabyte. Do you wish to continue?
        </AlertDialog.Description>
      </div>
      <div class="flex w-full items-center justify-center gap-2">
        <AlertDialog.Cancel
          class="inline-flex h-input w-full items-center justify-center rounded-input bg-muted text-[15px] font-medium shadow-mini transition-all hover:bg-dark-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
          >Cancel</AlertDialog.Cancel
        >
        <AlertDialog.Action
          class="inline-flex h-input w-full items-center justify-center rounded-input bg-dark text-[15px] font-semibold text-background shadow-mini transition-all hover:bg-dark/95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
          >Continue</AlertDialog.Action
        >
      </div>
    </AlertDialog.Content>
  </AlertDialog.Portal>
</AlertDialog.Root>

Structure

	<script lang="ts">
  import { AlertDialog } from "bits-ui";
</script>
 
<AlertDialog.Root>
  <AlertDialog.Trigger />
  <AlertDialog.Portal>
    <AlertDialog.Overlay />
    <AlertDialog.Content>
      <AlertDialog.Title />
      <AlertDialog.Description />
      <AlertDialog.Cancel />
      <AlertDialog.Action />
    </AlertDialog.Content>
  </AlertDialog.Portal>
</AlertDialog.Root>

API Reference

AlertDialog.Root

The root component used to set and manage the state of the alert dialog.

Property	Type	Description
`preventScroll`	`boolean`	Whether or not to prevent scroll on the body when the alert dialog is open. `Default: true`
`closeOnEscape`	`boolean`	Whether to close the alert dialog when the escape key is pressed. `Default: true`
`closeOnOutsideClick`	`boolean`	Whether to close the alert dialog when a click occurs outside of it. `Default: false`
`open`	`boolean`	Whether or not the alert dialog is open. `Default: false`
`onOpenChange`	`function`	A callback function called when the open state changes. `Default: —— undefined`
`openFocus`	`FocusProp`	Override the initial focus when the alert dialog is opened. `Default: —— undefined`
`closeFocus`	`FocusProp`	Override the focus when the alert dialog is closed. `Default: —— undefined`
`portal`	`union`	Where to render the alert dialog when it is open. Defaults to the body. Can be disabled by passing `null` `Default: —— undefined`
`onOutsideClick`	`function`	A callback function called when a click occurs outside of the element. If `event.preventDefault()` is called, the default behavior of closing the element will be prevented. `Default: —— undefined`

Slot Property	Type	Description
`ids`	`object`	The ids of the elements within the component, useful when you don't necessarily want to provide a custom ID, but still want access to the ID being assigned (if any).

AlertDialog.Trigger

The element which opens the alert dialog on press.

Property	Type	Description
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`el`	`HTMLButtonElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-alert-dialog-trigger`	`——`	Present on the trigger.

AlertDialog.Content

The content displayed within the alert dialog modal.

Property	Type	Description
`transition`	`function`	A Svelte transition function to use when transitioning the content in and out. `Default: —— undefined`
`transitionConfig`	`TransitionConfig`	The configuration to apply to the transition. `Default: —— undefined`
`inTransition`	`function`	A Svelte transition function to use when transitioning the content in and out. `Default: —— undefined`
`inTransitionConfig`	`TransitionConfig`	The configuration to apply to the transition. `Default: —— undefined`
`outTransition`	`function`	A Svelte transition function to use when transitioning the content in and out. `Default: —— undefined`
`outTransitionConfig`	`TransitionConfig`	The configuration to apply to the transition. `Default: —— undefined`
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`el`	`HTMLDivElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-state`	`enum`	The state of the alert dialog.
`data-alert-dialog-content`	`——`	Present on the content.

AlertDialog.Overlay

An overlay which covers the body when the alert dialog is open.

Property	Type	Description
`transition`	`function`	A Svelte transition function to use when transitioning the content in and out. `Default: —— undefined`
`transitionConfig`	`TransitionConfig`	The configuration to apply to the transition. `Default: —— undefined`
`inTransition`	`function`	A Svelte transition function to use when transitioning the content in and out. `Default: —— undefined`
`inTransitionConfig`	`TransitionConfig`	The configuration to apply to the transition. `Default: —— undefined`
`outTransition`	`function`	A Svelte transition function to use when transitioning the content in and out. `Default: —— undefined`
`outTransitionConfig`	`TransitionConfig`	The configuration to apply to the transition. `Default: —— undefined`
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`el`	`HTMLDivElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-state`	`enum`	The state of the alert dialog.
`data-alert-dialog-overlay`	`——`	Present on the overlay.

AlertDialog.Portal

A portal which renders the alert dialog into the body when it is open.

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-portal`	`——`	Present if the `portal` prop is not `null`.
`data-alert-dialog-portal`	`——`	Present on the portal.

AlertDialog.Action

A button used to close the alert dialog by taking an action.

Property	Type	Description
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`el`	`HTMLButtonElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-alert-dialog-action`	`——`	Present on the action button.

AlertDialog.Cancel

A button used to close the alert dialog without taking an action.

Property	Type	Description
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`el`	`HTMLButtonElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-alert-dialog-cancel`	`——`	Present on the cancel button.

AlertDialog.Title

An accessibile title for the alert dialog.

Property	Type	Description
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`el`	`HTMLHeadingElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`
`level`	`enum`	The heading level of the title. `Default: —— undefined`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-alert-dialog-title`	`——`	Present on the title.

AlertDialog.Description

An accessibile description for the alert dialog.

Property	Type	Description
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`el`	`HTMLDivElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-alert-dialog-description`	`——`	Present on the description.

Examples

Controlled

If you want to control or be aware of the open state of the dialog from outside of the component, bind to the open prop.

	<script lang="ts">
  import { AlertDialog } from "bits-ui";
  let dialogOpen = false;
</script>
 
<button on:click={() => (dialogOpen = true)}>Open Dialog</button>
<AlertDialog.Root bind:open={dialogOpen}>
  <AlertDialog.Trigger />
  <AlertDialog.Portal>
    <AlertDialog.Overlay />
    <AlertDialog.Content>
      <AlertDialog.Title />
      <AlertDialog.Description />
      <AlertDialog.Cancel />
      <AlertDialog.Action />
    </AlertDialog.Content>
  </AlertDialog.Portal>
</AlertDialog.Root>