Alert Dialog

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

	<script lang="ts">
  import * as AlertDialog from "@/components//ui/alert-dialog";
  import { Button } from "@/components//ui/button";
</script>
 
<AlertDialog.Root>
  <AlertDialog.Trigger asChild let:builder>
    <Button builders={[builder]} variant="outline"
      >Show Dialog</Button
    >
  </AlertDialog.Trigger>
  <AlertDialog.Content>
    <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.Cancel>Cancel</AlertDialog.Cancel>
      <AlertDialog.Action>Continue</AlertDialog.Action>
    </AlertDialog.Footer>
  </AlertDialog.Content>
</AlertDialog.Root>

	<script lang="ts">
  import * as AlertDialog from "@/components//ui/alert-dialog";
  import { Button } from "@/components//ui/button";
</script>
 
<AlertDialog.Root>
  <AlertDialog.Trigger asChild let:builder>
    <Button builders={[builder]} variant="outline"
      >Show Dialog</Button
    >
  </AlertDialog.Trigger>
  <AlertDialog.Content>
    <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.Cancel>Cancel</AlertDialog.Cancel>
      <AlertDialog.Action>Continue</AlertDialog.Action>
    </AlertDialog.Footer>
  </AlertDialog.Content>
</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>

	<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

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

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`

AlertDialog.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'`

AlertDialog.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'`

AlertDialog.Portal

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

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`

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`

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`

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`

🚧 UNDER CONSTRUCTION 🚧