Stable in React

Alert Dialog

A dialog that requires a response to proceed.

Compare Alert Dialog in all 5 frameworks

Loading React 19.3.1…

Hover a part or use it. The code follows. · Loading React…

117Tests passing in React · 0 failing

28.3 KiBSize

1.30 msOpen

2.00 msClose

0.84 MiBMemory

productdevbook and 13 upstream authors6 commits · last Nov 4

Install#

One package per framework. Alert Dialog's parts come from it; the anatomy tab at the top shows how they nest.

bun add @▢▢▢▢/react

9 parts. The example uses 8 of them; the data does not say which are required.

AlertDialog.RootGroups all parts of the alert dialog.
AlertDialog.TriggerA button that opens the alert dialog.
AlertDialog.PortalA portal element that moves the popup to a different part of the DOM.
AlertDialog.BackdropAn overlay displayed beneath the popup.
AlertDialog.PopupA container for the dialog contents.
AlertDialog.TitleA heading that labels the dialog.
AlertDialog.DescriptionA paragraph with additional information about the dialog.
AlertDialog.CloseA button that closes the dialog.
AlertDialog.ViewportA positioning container for the dialog popup that can be made scrollable. Not in the example.

Examples#

Common ways to put it to work. Each one runs live.

A trigger outside Root opens it through a handle.

AlertDialogDetachedTriggersSimple.tsx

Styling and accessibility#

The parts ship no styles. Style their states with these attributes; the CSS tab at the top has a sheet. The same CSS works in all five frameworks.

[data-disabled]Present when the trigger is disabled. On Trigger, Close.
[data-popup-open]Present when the corresponding alert dialog is open. On Trigger.
[data-open]Present when the dialog is open. On Backdrop, Popup, Viewport.
[data-closed]Present when the dialog is closed. On Backdrop, Popup, Viewport.
[data-starting-style]Present when the dialog begins animating in. On Backdrop, Popup, Viewport.
[data-ending-style]Present when the dialog is animating out. On Backdrop, Popup, Viewport.
[data-nested]Present when the dialog is nested within another dialog. On Popup, Viewport.
[data-nested-dialog-open]Present when the dialog has other open dialogs nested within it. On Popup, Viewport.
--nested-dialogsIndicates how many dialogs are nested within. On Popup.

Keyboard

EscapeCloses the alert dialog and returns focus to the trigger that opened it On Popup.

Set for you

aria-haspopup="dialog", aria-expanded, aria-controlsa screen reader says the button opens a dialog and whether it is openTrigger
role="alertdialog"the popup is announced as an alert that needs an answerPopup
aria-labelledby to Title, aria-describedby to Descriptionthe question and its consequence are read when it opensPopup
aria-hidden="true" on the rest of the pagea screen reader stays inside until the person answersPopup
role="presentation"the overlay is not readBackdrop
role="presentation"the positioning container is not readViewport

API reference#

19 props across 9 parts, in React syntax, and className, style, render once for every part. Open a row to try it.

Filter props

AlertDialog · all parts

Shared propsEvery part that renders an element takes these.

classNameCSS class applied to the element, or a function that returns a class based on the component's state.string | ((state: State) => string | undefined)

styleStyle applied to the element, or a function that returns a style object based on the component's state.React.CSSProperties | ((state: State) => React.CSSProperties | undefined)

renderAllows you to replace the component's HTML element with a different tag, or compose it with another component.React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, State>

Use it in React#

What differs from the React API. Switch the framework at the top of the page.

@▢▢▢▢/react is the React 19 package. Its parts, props, data attributes and error messages are upstream Base UI's, and upstream's own tests run against it.

Parts
Each component is its own entry point and exports one namespace named after it.
```
import { Switch } from '@base-ui-next/react/switch'

export function Example() {
  return (
    <Switch.Root>
      <Switch.Thumb />
    </Switch.Root>
  )
}
```
A part renders the element its API reference names, such as a <span> for Switch.Root.
Props and events
Props and callbacks have upstream's names and signatures: onCheckedChange(checked, details), onOpenChange(open, details), onValueChange(value, details). details carries reason, event, cancel() and allowPropagation(). Native handlers are React's (onClick, onKeyDown), and event.preventBaseUIHandler() stops a part's own handler.
Styling
className takes a string or a function (state) => string; style takes an object or a function (state) => object. The state's data-* attributes are on the element for CSS.
render
render takes an element (render={<a href="/docs" />}) or a function (props, state) => element that spreads props on what it returns.
Refs
ref reaches the part's element. Imperative handles are ref props, as upstream: inputRef, and actionsRef ({ validate } on Field and Form, { unmount, close } on Dialog).
Binding
A part is controlled when its value prop (checked, open, value) is set, and uncontrolled with the default form (defaultChecked, defaultOpen, defaultValue). React has no two-way binding: pair the value with its change callback.
From @base-ui/react
Change the import from @base-ui/react/<component> to @▢▢▢▢/react/<component>.
From @base-ui/react
Nothing else changes: props, parts, data attributes and errors are the same.