> Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

# Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

## Features

- Focus is automatically trapped.

- Can be controlled or uncontrolled.

- Manages screen reader announcements with `Title` and `Description` components.

- Esc closes the component automatically.

## Anatomy

Import all parts and piece them together.

```jsx
import { AlertDialog } from "@radix-solid/primitives";

export default () => <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

### Root

Contains all the parts of an alert dialog.

| Prop                                                                                                                         | Type       | Default |
| ---------------------------------------------------------------------------------------------------------------------------- | ---------- | ------- |
| `defaultOpen`The open state of the dialog when it is initially rendered. Use when you do not need to control its open state. | `boolean`  | —       |
| `open`The controlled open state of the dialog. Must be used in conjunction with `onOpenChange`.                              | `boolean`  | —       |
| `onOpenChange`Event handler called when the open state of the dialog changes.                                                | `function` | —       |

### Trigger

A button that opens the dialog.

| Prop                                                                                                                                                                    | Type      | Default |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean` | `false` |

| Data attribute | Values               |
| -------------- | -------------------- |
| `[data-state]` | `"open" \| "closed"` |

### Portal

When used, portals your overlay and content parts into the `body`.

| Prop                                                                                                                                                                                                                                        | Type          | Default         |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | --------------- |
| `forceMount`Used to force mounting when more control is needed. Useful when controlling animation with Solid-compatible animation libraries. If used on this part, it will be inherited by `AlertDialog.Overlay` and `AlertDialog.Content`. | `boolean`     | —               |
| `container`Specify a container element to portal the content into.                                                                                                                                                                          | `HTMLElement` | `document.body` |

### Overlay

A layer that covers the inert portion of the view when the dialog is open.

| Prop                                                                                                                                                                                | Type      | Default |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details.             | `boolean` | `false` |
| `forceMount`Used to force mounting when more control is needed. Useful when controlling animation with Solid-compatible animation libraries. It inherits from `AlertDialog.Portal`. | `boolean` | —       |

| Data attribute | Values               |
| -------------- | -------------------- |
| `[data-state]` | `"open" \| "closed"` |

### Content

Contains content to be rendered when the dialog is open.

| Prop                                                                                                                                                                                | Type       | Default |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details.             | `boolean`  | `false` |
| `forceMount`Used to force mounting when more control is needed. Useful when controlling animation with Solid-compatible animation libraries. It inherits from `AlertDialog.Portal`. | `boolean`  | —       |
| `onOpenAutoFocus`Event handler called when focus moves to the destructive action after opening. It can be prevented by calling `event.preventDefault`.                              | `function` | —       |
| `onCloseAutoFocus`Event handler called when focus moves to the trigger after closing. It can be prevented by calling `event.preventDefault`.                                        | `function` | —       |
| `onEscapeKeyDown`Event handler called when the escape key is down. It can be prevented by calling `event.preventDefault`.                                                           | `function` | —       |

| Data attribute | Values               |
| -------------- | -------------------- |
| `[data-state]` | `"open" \| "closed"` |

### Cancel

A button that closes the dialog. This button should be distinguished visually from `AlertDialog.Action` buttons.

| Prop                                                                                                                                                                    | Type      | Default |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean` | `false` |

### Action

A button that closes the dialog. These buttons should be distinguished visually from the `AlertDialog.Cancel` button.

| Prop                                                                                                                                                                    | Type      | Default |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean` | `false` |

### Title

An accessible name to be announced when the dialog is opened. Alternatively, you can provide `aria-label` or `aria-labelledby` to `AlertDialog.Content` and exclude this component.

| Prop                                                                                                                                                                    | Type      | Default |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean` | `false` |

### Description

An accessible description to be announced when the dialog is opened. Alternatively, you can provide `aria-describedby` to `AlertDialog.Content` and exclude this component.

| Prop                                                                                                                                                                    | Type      | Default |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean` | `false` |

## Examples

### Close after asynchronous form submission

Use the controlled props to programmatically close the Alert Dialog after an async operation has completed.

```jsx
import { createSignal } from "solid-js";

import { AlertDialog } from "@radix-solid/primitives";

const wait = () => new Promise(resolve => setTimeout(resolve, 1000));

export default () => {

  const [open, setOpen] = createSignal(false);

  return <AlertDialog.Root open={open()} onOpenChange={setOpen}>

			<AlertDialog.Trigger>Open</AlertDialog.Trigger>

			<AlertDialog.Portal>

				<AlertDialog.Overlay />

				<AlertDialog.Content>

					<form onSubmit={event => {
          wait().then(() => setOpen(false));
          event.preventDefault();
        }}>

						{/** some inputs */}

						<button type="submit">Submit</button>

					</form>

				</AlertDialog.Content>

			</AlertDialog.Portal>

		</AlertDialog.Root>;

};
```

### Custom portal container

Customise the element that your alert dialog portals into.

```jsx
import { createSignal } from "solid-js";

export default () => {

  const [container, setContainer] = createSignal(null);

  return <div>

			<AlertDialog.Root>

				<AlertDialog.Trigger />

				<AlertDialog.Portal container={container()}>

					<AlertDialog.Overlay />

					<AlertDialog.Content>...</AlertDialog.Content>

				</AlertDialog.Portal>

			</AlertDialog.Root>



			<div ref={setContainer} />

		</div>;

};
```

## Accessibility

Adheres to the [Alert and Message Dialogs WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog).

### Keyboard Interactions

| Key           | Description                                                 |
| ------------- | ----------------------------------------------------------- |
| `Space`       | Opens/closes the dialog.                                    |
| `Enter`       | Opens/closes the dialog.                                    |
| `Tab`         | Moves focus to the next focusable element.                  |
| `Shift + Tab` | Moves focus to the previous focusable element.              |
| `Esc`         | Closes the dialog and moves focus to `AlertDialog.Trigger`. |