bits

Alert Dialog

Presents critical information or prompts to the user, typically requiring their attention or action.

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>
	<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>

Controlled Usage

If you want to control or be aware of the open state of the dialog from outside of the component, you can 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>
	<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>

Component API

Alert Dialog.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: true
open boolean

Whether or not the alert dialog is open.

Default: false
onOpenChange (open: boolean) => void

A callback function called when the open state changes.

Default: undefined

Alert Dialog.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

Alert Dialog.Content

The content displayed within the alert dialog modal.

Property Type Description
asChild boolean

Whether to use render delegation with this component or not.

Default: false
Data Attribute Value/Description
data-state

The state of the alert dialog.

Value: 'open' | 'closed'

Alert Dialog.Overlay

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

Property Type Description
asChild boolean

Whether to use render delegation with this component or not.

Default: false
Data Attribute Value/Description
data-state

The state of the alert dialog.

Value: 'open' | 'closed'

Alert Dialog.Portal

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

Alert Dialog.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

Alert Dialog.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

Alert Dialog.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

Alert Dialog.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

🚧 UNDER CONSTRUCTION 🚧