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.

Styling solution Source file Download runnable sandbox

import { AlertDialog } from "@radix-solid/primitives";
import styles from "./styles.module.css";
const AlertDialogDemo = () => <AlertDialog.Root>
		<AlertDialog.Trigger asChild>{target => target("button", {
      "class": `${styles.Button} violet`,
      children: <>Delete account</>
    })}</AlertDialog.Trigger>
		<AlertDialog.Portal>
			<AlertDialog.Overlay class={styles.Overlay} />
			<AlertDialog.Content class={styles.Content}>
				<AlertDialog.Title class={styles.Title}>
					Are you absolutely sure?
				</AlertDialog.Title>
				<AlertDialog.Description class={styles.Description}>
					This action cannot be undone. This will permanently delete your
					account and remove your data from our servers.
				</AlertDialog.Description>
				<div style={{
        "display": "flex",
        "gap": "25px",
        "justify-content": "flex-end"
      }}>
					<AlertDialog.Cancel asChild>{target => target("button", {
            "class": `${styles.Button} muave`,
            children: <>Cancel</>
          })}</AlertDialog.Cancel>
					<AlertDialog.Action asChild>{target => target("button", {
            "class": `${styles.Button} red`,
            children: <>
							Yes, delete account
						</>
          })}</AlertDialog.Action>
				</div>
			</AlertDialog.Content>
		</AlertDialog.Portal>
	</AlertDialog.Root>;
export default AlertDialogDemo;

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.

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`	`boolean`	—
`open`	`boolean`	—
`onOpenChange`	`function`	—

Trigger

A button that opens the dialog.

Prop	Type	Default
`asChild`	`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`	`boolean`	—
`container`	`HTMLElement`	`document.body`

Overlay

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

Prop	Type	Default
`asChild`	`boolean`	`false`
`forceMount`	`boolean`	—

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

Content

Contains content to be rendered when the dialog is open.

Prop	Type	Default
`asChild`	`boolean`	`false`
`forceMount`	`boolean`	—
`onOpenAutoFocus`	`function`	—
`onCloseAutoFocus`	`function`	—
`onEscapeKeyDown`	`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`	`boolean`	`false`

Action

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

Prop	Type	Default
`asChild`	`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`	`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`	`boolean`	`false`

Examples

Close after asynchronous form submission

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

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.

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.

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