`). |
| className | `string \| ((state: Accordion.Trigger.State) => string \| undefined)` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. |
| style | `React.CSSProperties \| ((state: Accordion.Trigger.State) => React.CSSProperties \| undefined)` | - | Style applied to the element, or a function that
returns a style object based on the component's state. |
| render | `ReactElement \| ((props: HTMLProps, state: Accordion.Trigger.State) => ReactElement)` | - | 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. |
**Trigger Data Attributes:**
| Attribute | Type | Description |
| :-------------- | :--- | :------------------------------------------- |
| data-panel-open | - | Present when the accordion panel is open. |
| data-disabled | - | Present when the accordion item is disabled. |
##### Trigger.Props
Re-export of [Trigger](#accordion) props.
##### Trigger.State
```typescript
type AccordionTriggerState = {
/** Whether the accordion item's panel is currently hidden. */
hidden: boolean;
/** The item index. */
index: number;
/** Whether the component is open. */
open: boolean;
/** The current value. */
value: any[];
/** Whether the component should ignore user interaction. */
disabled: boolean;
/**
* The component orientation.
*
* Deprecated following the [APG guidance update](https://github.com/w3c/aria-practices/pull/3434)
* to remove roving focus.
*
* This state no longer affects keyboard focus behavior.
* @deprecated
*/
orientation: Orientation;
};
```
##### Item
Groups an accordion header with the corresponding panel.
Renders a `
` element.
**Item Props:**
| Prop | Type | Default | Description |
| :----------- | :------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| value | `any` | - | A unique value that identifies this accordion item.
If no value is provided, a unique ID will be generated automatically.
Use when controlling the accordion programmatically, or to set an initial
open state. |
| onOpenChange | `((open: boolean, eventDetails: Accordion.Item.ChangeEventDetails) => void)` | - | Event handler called when the panel is opened or closed. |
| disabled | `boolean` | `false` | Whether the component should ignore user interaction. |
| className | `string \| ((state: Accordion.Item.State) => string \| undefined)` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. |
| style | `React.CSSProperties \| ((state: Accordion.Item.State) => React.CSSProperties \| undefined)` | - | Style applied to the element, or a function that
returns a style object based on the component's state. |
| render | `ReactElement \| ((props: HTMLProps, state: Accordion.Item.State) => ReactElement)` | - | 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. |
**`value` Prop Example:**
```tsx
// initially open
// initially closed
```
**Item Data Attributes:**
| Attribute | Type | Description |
| :------------ | :------- | :------------------------------------------- |
| data-open | - | Present when the accordion item is open. |
| data-disabled | - | Present when the accordion item is disabled. |
| data-index | `number` | Indicates the index of the accordion item. |
##### Item.Props
Re-export of [Item](#accordion) props.
##### Item.State
```typescript
type AccordionItemState = {
/** Whether the accordion item's panel is currently hidden. */
hidden: boolean;
/** The item index. */
index: number;
/** Whether the component is open. */
open: boolean;
/** The current value. */
value: any[];
/** Whether the component should ignore user interaction. */
disabled: boolean;
/**
* The component orientation.
*
* Deprecated following the [APG guidance update](https://github.com/w3c/aria-practices/pull/3434)
* to remove roving focus.
*
* This state no longer affects keyboard focus behavior.
* @deprecated
*/
orientation: Orientation;
};
```
##### Item.ChangeEventReason
```typescript
type AccordionItemChangeEventReason = 'trigger-press' | 'none';
```
##### Item.ChangeEventDetails
```typescript
type AccordionItemChangeEventDetails = (
| { reason: 'trigger-press'; event: MouseEvent | PointerEvent | TouchEvent | KeyboardEvent }
| { reason: 'none'; event: Event }
) & {
/** Cancels Base UI from handling the event. */
cancel: () => void;
/** Allows the event to propagate in cases where Base UI will stop the propagation. */
allowPropagation: () => void;
/** Indicates whether the event has been canceled. */
isCanceled: boolean;
/** Indicates whether the event is allowed to propagate. */
isPropagationAllowed: boolean;
/** The element that triggered the event, if applicable. */
trigger: Element | undefined;
};
```
##### Header
A heading that labels the corresponding panel.
Renders an `
` element.
**Header Props:**
| Prop | Type | Default | Description |
| :-------- | :--------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| className | `string \| ((state: Accordion.Header.State) => string \| undefined)` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. |
| style | `React.CSSProperties \| ((state: Accordion.Header.State) => React.CSSProperties \| undefined)` | - | Style applied to the element, or a function that
returns a style object based on the component's state. |
| render | `ReactElement \| ((props: HTMLProps, state: Accordion.Header.State) => ReactElement)` | - | 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. |
**Header Data Attributes:**
| Attribute | Type | Description |
| :------------ | :------- | :------------------------------------------- |
| data-open | - | Present when the accordion item is open. |
| data-disabled | - | Present when the accordion item is disabled. |
| data-index | `number` | Indicates the index of the accordion item. |
##### Header.Props
Re-export of [Header](#accordion) props.
##### Header.State
```typescript
type AccordionHeaderState = {
/** Whether the accordion item's panel is currently hidden. */
hidden: boolean;
/** The item index. */
index: number;
/** Whether the component is open. */
open: boolean;
/** The current value. */
value: any[];
/** Whether the component should ignore user interaction. */
disabled: boolean;
/**
* The component orientation.
*
* Deprecated following the [APG guidance update](https://github.com/w3c/aria-practices/pull/3434)
* to remove roving focus.
*
* This state no longer affects keyboard focus behavior.
* @deprecated
*/
orientation: Orientation;
};
```
##### Panel
A collapsible panel with the accordion item contents.
Renders a `` element.
**Panel Props:**
| Prop | Type | Default | Description |
| :--------------- | :-------------------------------------------------------------------------------------------- | :------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| hiddenUntilFound | `boolean` | `false` | Allows the browser's built-in page search to find and expand the panel contents. Overrides the `keepMounted` prop and uses `hidden="until-found"`
to hide the element without removing it from the DOM. |
| className | `string \| ((state: Accordion.Panel.State) => string \| undefined)` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. |
| style | `React.CSSProperties \| ((state: Accordion.Panel.State) => React.CSSProperties \| undefined)` | - | Style applied to the element, or a function that
returns a style object based on the component's state. |
| keepMounted | `boolean` | `false` | Whether to keep the element in the DOM while the panel is closed.
This prop is ignored when `hiddenUntilFound` is used. |
| render | `ReactElement \| ((props: HTMLProps, state: Accordion.Panel.State) => ReactElement)` | - | 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. |
**Panel Data Attributes:**
| Attribute | Type | Description |
| :------------------ | :------- | :------------------------------------------- |
| data-open | - | Present when the accordion panel is open. |
| data-orientation | - | Indicates the orientation of the accordion. |
| data-disabled | - | Present when the accordion item is disabled. |
| data-index | `number` | Indicates the index of the accordion item. |
| data-starting-style | - | Present when the panel is animating in. |
| data-ending-style | - | Present when the panel is animating out. |
**Panel CSS Variables:**
| Variable | Type | Description |
| :------------------------- | :------- | :---------------------------- |
| `--accordion-panel-height` | `number` | The accordion panel's height. |
| `--accordion-panel-width` | `number` | The accordion panel's width. |
##### Panel.Props
Re-export of [Panel](#accordion) props.
##### Panel.State
```typescript
type AccordionPanelState = {
/** The transition status of the component. */
transitionStatus: TransitionStatus;
/** Whether the accordion item's panel is currently hidden. */
hidden: boolean;
/** The item index. */
index: number;
/** Whether the component is open. */
open: boolean;
/** The current value. */
value: any[];
/** Whether the component should ignore user interaction. */
disabled: boolean;
/**
* The component orientation.
*
* Deprecated following the [APG guidance update](https://github.com/w3c/aria-practices/pull/3434)
* to remove roving focus.
*
* This state no longer affects keyboard focus behavior.
* @deprecated
*/
orientation: Orientation;
};
```
#### Additional Types
##### AccordionValue
```typescript
type AccordionValue
= Value[];
```
#### External Types
##### Orientation
```typescript
type Orientation = 'horizontal' | 'vertical';
```
#### Export Groups
- `Accordion.Root`: `Accordion.Root`, `Accordion.Root.Value`, `Accordion.Root.State`, `Accordion.Root.Props`, `Accordion.Root.ChangeEventReason`, `Accordion.Root.ChangeEventDetails`
- `Accordion.Item`: `Accordion.Item`, `Accordion.Item.State`, `Accordion.Item.Props`, `Accordion.Item.ChangeEventReason`, `Accordion.Item.ChangeEventDetails`
- `Accordion.Header`: `Accordion.Header`, `Accordion.Header.State`, `Accordion.Header.Props`
- `Accordion.Trigger`: `Accordion.Trigger`, `Accordion.Trigger.State`, `Accordion.Trigger.Props`
- `Accordion.Panel`: `Accordion.Panel`, `Accordion.Panel.State`, `Accordion.Panel.Props`
- `Default`: `AccordionValue`, `AccordionRootState`, `AccordionRootProps`, `AccordionRootChangeEventReason`, `AccordionRootChangeEventDetails`, `AccordionItemState`, `AccordionItemProps`, `AccordionItemChangeEventReason`, `AccordionItemChangeEventDetails`, `AccordionHeaderState`, `AccordionHeaderProps`, `AccordionTriggerState`, `AccordionTriggerProps`, `AccordionPanelState`, `AccordionPanelProps`
#### Canonical Types
Maps `Canonical`: `Alias` — Use Canonical when its namespace is already imported; otherwise use Alias.
- `Accordion.Root.State`: `AccordionRootState`
- `Accordion.Root.Props`: `AccordionRootProps`
- `Accordion.Root.ChangeEventReason`: `AccordionRootChangeEventReason`
- `Accordion.Root.ChangeEventDetails`: `AccordionRootChangeEventDetails`
- `Accordion.Item.State`: `AccordionItemState`
- `Accordion.Item.Props`: `AccordionItemProps`
- `Accordion.Item.ChangeEventReason`: `AccordionItemChangeEventReason`
- `Accordion.Item.ChangeEventDetails`: `AccordionItemChangeEventDetails`
- `Accordion.Header.State`: `AccordionHeaderState`
- `Accordion.Header.Props`: `AccordionHeaderProps`
- `Accordion.Trigger.State`: `AccordionTriggerState`
- `Accordion.Trigger.Props`: `AccordionTriggerProps`
- `Accordion.Panel.State`: `AccordionPanelState`
- `Accordion.Panel.Props`: `AccordionPanelProps`
### Alert Dialog
A high-quality, unstyled React alert dialog component that requires a user response to proceed.
#### Demo
##### Tailwind
This example shows how to implement the component using Tailwind CSS.
```tsx
/* index.tsx */
import { AlertDialog } from '@base-ui/react/alert-dialog';
const buttonClasses =
'flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400';
const dangerButtonClasses = `${buttonClasses} text-red-700 dark:text-red-400`;
export default function ExampleAlertDialog() {
return (
Discard draft
Discard draft?
You can’t undo this action.
);
}
```
##### CSS Modules
This example shows how to implement the component using CSS Modules.
```css
/* index.module.css */
.Button {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
height: 2rem;
padding: 0 0.75rem;
margin: 0;
border: 1px solid oklch(14.5% 0 0deg);
background-color: white;
font-family: inherit;
font-size: 0.875rem;
font-weight: 400;
line-height: 1;
white-space: nowrap;
color: oklch(14.5% 0 0deg);
-webkit-user-select: none;
user-select: none;
@media (prefers-color-scheme: dark) {
border: 1px solid white;
background-color: oklch(14.5% 0 0deg);
color: white;
}
&[data-color='red'] {
color: oklch(50.5% 0.213 27.518deg);
@media (prefers-color-scheme: dark) {
color: oklch(70.4% 0.191 22.216deg);
}
}
@media (hover: hover) {
&:hover:not([data-disabled]) {
background-color: oklch(97% 0 0deg);
@media (prefers-color-scheme: dark) {
background-color: oklch(26.9% 0 0deg);
}
}
}
&:active:not([data-disabled]) {
background-color: oklch(92.2% 0 0deg);
@media (prefers-color-scheme: dark) {
background-color: oklch(37.1% 0 0deg);
}
}
&:focus-visible {
outline: 2px solid oklch(14.5% 0 0deg);
outline-offset: -1px;
@media (prefers-color-scheme: dark) {
outline-color: white;
}
}
&[data-disabled] {
color: oklch(55.6% 0 0deg);
border-color: oklch(55.6% 0 0deg);
@media (prefers-color-scheme: dark) {
color: oklch(70.8% 0 0deg);
border-color: oklch(70.8% 0 0deg);
}
}
}
.Backdrop {
position: fixed;
min-height: 100dvh;
inset: 0;
background-color: black;
opacity: 0.2;
transition: opacity 150ms;
/* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
@supports (-webkit-touch-callout: none) {
position: absolute;
}
@media (prefers-color-scheme: dark) {
opacity: 0.5;
}
&[data-starting-style],
&[data-ending-style] {
opacity: 0;
}
}
.Popup {
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 1rem;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 24rem;
max-width: calc(100vw - 3rem);
margin-top: -2rem;
padding: 1rem;
border: 1px solid oklch(14.5% 0 0deg);
background-color: white;
color: oklch(14.5% 0 0deg);
box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
transition:
transform 100ms ease-out,
opacity 100ms ease-out;
@media (prefers-color-scheme: dark) {
border: 1px solid white;
background-color: oklch(14.5% 0 0deg);
color: white;
box-shadow: none;
}
&[data-starting-style],
&[data-ending-style] {
opacity: 0;
transform: translate(-50%, -50%) scale(0.98);
}
}
.Intro {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.Title {
margin: 0;
font-size: 1rem;
line-height: 1.5rem;
font-weight: 700;
}
.Description {
margin: 0;
font-size: 0.875rem;
line-height: 1.25rem;
color: oklch(43.9% 0 0deg);
@media (prefers-color-scheme: dark) {
color: oklch(70.8% 0 0deg);
}
}
.Actions {
display: flex;
justify-content: end;
gap: 0.75rem;
}
```
```tsx
/* index.tsx */
import { AlertDialog } from '@base-ui/react/alert-dialog';
import styles from './index.module.css';
export default function ExampleAlertDialog() {
return (
Discard draft
Discard draft?
You can't undo this action.
);
}
```
#### Anatomy
Import the component and assemble its parts:
```jsx title="Anatomy"
import { AlertDialog } from '@base-ui/react/alert-dialog';
;
```
#### Examples
##### Open from a menu
In order to open a dialog using a menu, control the dialog state and open it imperatively using the `onClick` handler on the menu item.
```tsx title="Connecting a dialog to a menu"
import * as React from 'react';
import { AlertDialog } from '@base-ui/react/alert-dialog';
import { Menu } from '@base-ui/react/menu';
function ExampleMenu() {
const [dialogOpen, setDialogOpen] = React.useState(false);
return (
Open menu
{/* @highlight-start */}
{/* Open the dialog when the menu item is clicked */}
setDialogOpen(true)}>Open dialog
{/* @highlight-end */}
{/* @highlight-start */}
{/* Control the dialog state */}
{/* @highlight-end */}
{/* prettier-ignore */}
{/* Rest of the dialog */}
);
}
```
##### Close confirmation
This example shows a nested confirmation dialog that opens if the text entered in the parent dialog is going to be discarded.
To implement this, both dialogs should be controlled. The confirmation dialog may be opened when `onOpenChange` callback of the parent dialog receives a request to close. This way, the confirmation is automatically shown when the user clicks the backdrop, presses the Esc key, or clicks a close button.
Use the `[data-nested-dialog-open]` selector and the `var(--nested-dialogs)` CSS variable to customize the styling of the parent dialog. Backdrops of the child dialogs won't be rendered so that you can present the parent dialog in a clean way behind the one on top of it.
#### Demo
##### Tailwind
This example shows how to implement the component using Tailwind CSS.
```tsx
/* index.tsx */
'use client';
import * as React from 'react';
import { AlertDialog } from '@base-ui/react/alert-dialog';
import { Dialog } from '@base-ui/react/dialog';
export default function ExampleDialog() {
const [dialogOpen, setDialogOpen] = React.useState(false);
const [confirmationOpen, setConfirmationOpen] = React.useState(false);
const [textareaValue, setTextareaValue] = React.useState('');
const titleId = React.useId();
return (
{
// Show the close confirmation if there’s text in the textarea
if (!open && textareaValue) {
setConfirmationOpen(true);
} else {
// Reset the text area value
setTextareaValue('');
// Open or close the dialog normally
setDialogOpen(open);
}
}}
>
Tweet
New tweet