AlertDialog · ui.voila.dev

Usage

import { AlertDialog } from "@voila.dev/ui/alert-dialog";

<AlertDialog.Root>
	<AlertDialog.Trigger render={<Button variant="outline" />}>Cancel</AlertDialog.Trigger>
	<AlertDialog.Content size="sm">
		<AlertDialog.Header>
			<AlertDialog.Media><WarningIcon className="text-destructive" /></AlertDialog.Media>
			<AlertDialog.Title>Cancel this project?</AlertDialog.Title>
			<AlertDialog.Description>The freelancer will be notified.</AlertDialog.Description>
		</AlertDialog.Header>
		<AlertDialog.Footer>
			<AlertDialog.Cancel>Keep project</AlertDialog.Cancel>
			<AlertDialog.Action variant="destructive">Cancel project</AlertDialog.Action>
		</AlertDialog.Footer>
	</AlertDialog.Content>
</AlertDialog.Root>

A modal that asks one question and will not be dismissed by clicking away. That is the whole difference from Dialog: an alert dialog is for a decision with consequences, so the escape routes are deliberate buttons rather than the backdrop. If you are building the common destructive confirmation, ConfirmDialog is this component with the title, buttons and open state already wired — reach for that first and come here when the layout needs to be your own.

Recipes

size takes default or sm; sm fits a question whose answer is one line.

Put the consequence in the title, not the control: "Delete this project?" tells someone what they are about to do, "Are you sure?" makes them guess. The confirm button should name the action too — Delete project, never OK.

API

AlertDialog.Root

Prop	Type	Default
`actionsRef`	`RefObject<DialogRootActions \| null>`	—	A ref to imperative actions.
`children`	`PayloadChildRenderFunction<unknown> \| ReactNode`	—	The content of the dialog. This can be a regular React node or a render function that receives the `payload` of the active trigger.
`defaultOpen`	`boolean`	—	Whether the dialog is initially open. To render a controlled dialog, use the `open` prop instead.
`defaultTriggerId`	`string \| null`	—	ID of the trigger that the dialog is associated with. This is useful in conjunction with the `defaultOpen` prop to create an initially open dialog.
`handle`	`AlertDialogHandle<unknown>`	—	A handle to associate the alert dialog with a trigger. If specified, allows external triggers to control the alert dialog's open state. Can be created with the AlertDialog.createHandle() method.
`onOpenChange`	`((open: boolean, eventDetails: AlertDialogRootChangeEventDetails) => void)`	—	Event handler called when the alert dialog is opened or closed.
`onOpenChangeComplete`	`((open: boolean) => void)`	—	Event handler called after any animations complete when the dialog is opened or closed.
`open`	`boolean`	—	Whether the dialog is currently open.
`triggerId`	`string \| null`	—	ID of the trigger that the dialog is associated with. This is useful in conjunction with the `open` prop to create a controlled dialog. There's no need to specify this prop when the dialog is uncontrolled (that is, when the `open` prop is not set).

Plus the DOM props of the element it renders. Source: alert-dialog/components/alert-dialog-root.tsx.

AlertDialog.Action

Prop	Type	Default
`size`	`"default"` \| `"icon"` \| `"icon-lg"` \| `"icon-sm"` \| `"icon-xs"` \| `"lg"` \| `"sm"` \| `"xs"`	`"default"`	Height and horizontal padding. The `icon-*` set is square, for a button whose entire content is one icon — give those an `aria-label`.
`variant`	`"brand"` \| `"default"` \| `"destructive"` \| `"ghost"` \| `"highlight"` \| `"link"` \| `"outline"` \| `"primary"` \| `"secondary"`	`"default"`	Weight of the action. `default` is the one thing the page exists for, at most one per view; `secondary` an equal-weight alternative; `outline` for toolbars and anything that repeats in a row; `ghost` inside dense surfaces; `destructive` for what cannot be undone; `link` for an action that reads as navigation.
`className`	`string` \| `((state: DialogCloseState) => string` \| `undefined)`	—	CSS class applied to the element, or a function that returns a class based on the component's state.
`nativeButton`	`boolean`	—	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).
`render`	`ComponentRenderFn<HTMLProps, DialogCloseState>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`style`	`CSSProperties` \| `((state: DialogCloseState) => CSSProperties` \| `undefined)`	—	Style applied to the element, or a function that returns a style object based on the component's state.

Plus the DOM props of the element it renders. Source: alert-dialog/components/alert-dialog-action.tsx.

AlertDialog.Cancel

Prop	Type	Default
`size`	`"default"` \| `"icon"` \| `"icon-lg"` \| `"icon-sm"` \| `"icon-xs"` \| `"lg"` \| `"sm"` \| `"xs"`	`"default"`	Height and horizontal padding. The `icon-*` set is square, for a button whose entire content is one icon — give those an `aria-label`.
`variant`	`"brand"` \| `"default"` \| `"destructive"` \| `"ghost"` \| `"highlight"` \| `"link"` \| `"outline"` \| `"primary"` \| `"secondary"`	`"outline"`	Weight of the action. `default` is the one thing the page exists for, at most one per view; `secondary` an equal-weight alternative; `outline` for toolbars and anything that repeats in a row; `ghost` inside dense surfaces; `destructive` for what cannot be undone; `link` for an action that reads as navigation.
`className`	`string` \| `((state: DialogCloseState) => string` \| `undefined)`	—	CSS class applied to the element, or a function that returns a class based on the component's state.
`nativeButton`	`boolean`	—	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).
`render`	`ComponentRenderFn<HTMLProps, DialogCloseState>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`style`	`CSSProperties` \| `((state: DialogCloseState) => CSSProperties` \| `undefined)`	—	Style applied to the element, or a function that returns a style object based on the component's state.

Plus the DOM props of the element it renders. Source: alert-dialog/components/alert-dialog-cancel.tsx.

AlertDialog.Close

Prop	Type	Default
`className`	`string` \| `((state: DialogCloseState) => string` \| `undefined)`	—	CSS class applied to the element, or a function that returns a class based on the component's state.
`nativeButton`	`boolean`	—	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).
`render`	`ComponentRenderFn<HTMLProps, DialogCloseState>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`style`	`CSSProperties` \| `((state: DialogCloseState) => CSSProperties` \| `undefined)`	—	Style applied to the element, or a function that returns a style object based on the component's state.

Plus the DOM props of the element it renders. Source: alert-dialog/components/alert-dialog-close.tsx.

AlertDialog.Content

Prop	Type	Default
`size`	`"default" \| "sm"`	`"default"`	Width of the panel. `sm` suits a one-line confirmation.
`className`	`string` \| `((state: DialogPopupState) => string` \| `undefined)`	—	CSS class applied to the element, or a function that returns a class based on the component's state.
`finalFocus`	`boolean` \| `RefObject<HTMLElement \| null>` \| `((closeType: InteractionType) => void` \| `boolean` \| `HTMLElement` \| `null)`	—	Determines the element to focus when the dialog is closed.
`initialFocus`	`boolean` \| `RefObject<HTMLElement \| null>` \| `((openType: InteractionType) => void` \| `boolean` \| `HTMLElement` \| `null)`	—	Determines the element to focus when the dialog is opened. By default, focus moves to the first tabbable element inside the popup, except when the dialog is opened by touch — then the popup itself is focused to avoid opening the virtual keyboard.
`render`	`ComponentRenderFn<HTMLProps, DialogPopupState>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`style`	`CSSProperties` \| `((state: DialogPopupState) => CSSProperties` \| `undefined)`	—	Style applied to the element, or a function that returns a style object based on the component's state.

Plus the DOM props of the element it renders. Source: alert-dialog/components/alert-dialog-content.tsx.

AlertDialog.Description

Prop	Type	Default
`className`	`string` \| `((state: DialogDescriptionState) => string` \| `undefined)`	—	CSS class applied to the element, or a function that returns a class based on the component's state.
`render`	`ComponentRenderFn<HTMLProps, DialogDescriptionState>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`style`	`CSSProperties` \| `((state: DialogDescriptionState) => CSSProperties` \| `undefined)`	—	Style applied to the element, or a function that returns a style object based on the component's state.

Plus the DOM props of the element it renders. Source: alert-dialog/components/alert-dialog-description.tsx.

AlertDialog.Footer

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: alert-dialog/components/alert-dialog-footer.tsx.

AlertDialog.Header

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: alert-dialog/components/alert-dialog-header.tsx.

AlertDialog.Media

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: alert-dialog/components/alert-dialog-media.tsx.

AlertDialog.Overlay

Prop	Type	Default
`className`	`string` \| `((state: DialogBackdropState) => string` \| `undefined)`	—	CSS class applied to the element, or a function that returns a class based on the component's state.
`forceRender`	`boolean`	—	Whether the backdrop is forced to render even when nested.
`render`	`ComponentRenderFn<HTMLProps, DialogBackdropState>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`style`	`CSSProperties` \| `((state: DialogBackdropState) => CSSProperties` \| `undefined)`	—	Style applied to the element, or a function that returns a style object based on the component's state.

Plus the DOM props of the element it renders. Source: alert-dialog/components/alert-dialog-overlay.tsx.

AlertDialog.Portal

Prop	Type	Default
`className`	`string` \| `((state: DialogPortalState) => string` \| `undefined)`	—	CSS class applied to the element, or a function that returns a class based on the component's state.
`container`	`HTMLElement` \| `RefObject<HTMLElement \| ShadowRoot \| null>` \| `ShadowRoot` \| `null`	—	A parent element to render the portal element into.
`keepMounted`	`boolean`	—	Whether to keep the portal mounted in the DOM while the popup is hidden.
`render`	`ComponentRenderFn<HTMLProps, DialogPortalState>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`style`	`CSSProperties` \| `((state: DialogPortalState) => CSSProperties` \| `undefined)`	—	Style applied to the element, or a function that returns a style object based on the component's state.

Plus the DOM props of the element it renders. Source: alert-dialog/components/alert-dialog-portal.tsx.

AlertDialog.Title

Prop	Type	Default
`className`	`string` \| `((state: DialogTitleState) => string` \| `undefined)`	—	CSS class applied to the element, or a function that returns a class based on the component's state.
`render`	`ComponentRenderFn<HTMLProps, DialogTitleState>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`style`	`CSSProperties` \| `((state: DialogTitleState) => CSSProperties` \| `undefined)`	—	Style applied to the element, or a function that returns a style object based on the component's state.

Plus the DOM props of the element it renders. Source: alert-dialog/components/alert-dialog-title.tsx.

AlertDialog.Trigger

Prop	Type	Default
`className`	`string` \| `((state: DialogTriggerState) => string` \| `undefined)`	—	CSS class applied to the element, or a function that returns a class based on the component's state.
`handle`	`AlertDialogHandle<unknown>`	—	A handle to associate the trigger with an alert dialog. Can be created with the AlertDialog.createHandle() method.
`id`	`string`	—	ID of the trigger. In addition to being forwarded to the rendered element, it is also used to specify the active trigger for the dialog in controlled mode (with the DialogRoot `triggerId` prop).
`nativeButton`	`boolean`	—	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).
`payload`	`unknown`	—	A payload to pass to the dialog when it is opened.
`render`	`ComponentRenderFn<HTMLProps, DialogTriggerState>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`style`	`CSSProperties` \| `((state: DialogTriggerState) => CSSProperties` \| `undefined)`	—	Style applied to the element, or a function that returns a style object based on the component's state.

Plus the DOM props of the element it renders. Source: alert-dialog/components/alert-dialog-trigger.tsx.

ConfirmDialog · Dialog · ResponsiveDialog