Dialog

The <Dialog> component is a versatile UI element used to display important content that requires user interaction, typically in a modal or popup window. It is designed to temporarily interrupt the user's workflow to present critical information, request confirmation, or facilitate a task without navigating away from the current page.

Key features of the <Dialog> component include customizable content, support for multiple dialog sizes, focus trapping for accessibility, and optional overlay to dim the background. It can be used for alerts, forms, confirmations, or any interactive modal interface.

Anatomy

A dialog consists of an optional title, content, actions, an optional close button, and an underlay. The title provides context for the user, while the content holds the main message or interactive elements like forms. The actions section contains controls such as buttons for confirming or canceling. The underlay dims the background to focus attention on the dialog and prevent interaction with other elements on the page. The close button offers way to dismiss the dialog.

Appearance

The appearance of a component can be customized using the variant and size props. These props adjust the visual style and dimensions of the component, available values are based on the active theme.

Variant

Size

The selected theme does not has any options for "variant".

Property	Type	Description
`variant`	`-`	The available variants of this component.
`size`	`xsmall \| small \| medium`	The available sizes of this component.

Usage

A dialog is used to capture the user’s attention for tasks that require focus, such as confirming actions, filling out forms, or providing important information. Common use cases include confirmation prompts, data entry, and notifications.

When using a dialog, it’s important to ensure it doesn’t unnecessarily interrupt the user’s workflow and that it provides a clear way to close or complete the interaction. Dialogs should be concise, focused on a single task and while they are highly versatile, dialogs aren’t suitable for every situation. They can be intrusive and should be used sparingly.

Use a dialog when

an immediate response is needed to continue a user-initiated process,
to notify the user of urgent information related to their task, or
to confirm a user decision.

Labeling

To correctly label a dialog, always include a title (<Dialog.Title>) or an aria-label so users understand its purpose. The title should be concise and descriptive, using a verb-noun combination (e.g., "Edit Profile" or "Confirm Purchase"). If no visible title is used, ensure that the dialog is properly labeled with an aria-label for accessibility.

For short, straightforward messages, you can combine the title and the message to make things clearer and avoid repeating information in both the title and content. If you do this, there should be no additional text in the content of the dialog.

<Dialog aria-label="delete event">
  <Dialog.Title>Are you sure you want to delete this event?</Dialog.Title>
  <Dialog.Actions>
    <Button variant="secondary" slot="close">
      Cancel
    </Button>
    <Button variant="destructive">Delete</Button>
  </Dialog.Actions>
</Dialog>

Content

Keep dialogs simple by limiting the number of interactions. Remove any content or elements that aren't essential to completing the task. For instance, if the dialog is for editing a user's profile information, only include the necessary fields like name and email, rather than unrelated options like notification settings.

Preview

Code

It's also best to avoid multi-step processes or requiring users to navigate within the dialog, as this can complicate the experience. If a task is too complex, consider using a dedicated page instead.

Lastly, avoid asking users to make decisions that require information not accessible in the dialog, such as needing to check a different page or document to proceed—since this can frustrate users and disrupt their workflow.

Dismissal

When a dialog is open, users cannot interact with the rest of the page until the dialog is closed. To accommodate both mouse and keyboard users, the <Dialog> provides multiple ways to close it:

pressing the close button (slot="close") inside <Dialog.Actions>,
using the close button (indicated by an "x"),
pressing the "Esc" key, or
clicking on the underlay (the dimmed background).

To prevent the dialog from closing when the underlay is (accidentally) clicked, you can set the dismissable prop on the <Dialog.Trigger> component to false. This disables closing the dialog by clicking on the background, ensuring that the dialog remains open until the user interacts with the provided buttons or other close mechanisms.

Preview

Code

Dedicated close button

To conveniently create a close button for a dialog, set the slot prop to "close" on any <Button> within <Dialog.Actions> component. Pressing the button will then close the dialog.

Role

When a dialog requires the user's immediate attention, such as for an error or warning, set role="alertdialog". This role ensures that assistive technologies, like screen readers, treat the dialog as high-priority, immediately notifying users of its content.

It is essential for situations where the user must address an issue before continuing, such as critical system errors or warnings about destructive actions. Proper use of role="alertdialog" improves accessibility and ensures important messages are not missed.

Confirmation

A confirmation dialog asks a user to verify an action, preventing accidental and destructive outcomes. Use it for irreversible actions with significant consequences, such as permanently deleting a file or discarding unsaved changes.

For an effective dialog, be specific in your prompt. For example, ask "Permanently delete this account?" instead of a generic "Are you sure?". Action buttons should have clear, unambiguous labels like "Delete" and "Cancel". To avoid user fatigue, reserve confirmation dialogs only for actions that truly warrant a second thought, not for minor tasks.

Use the useConfirmation hook for this use case. This hook provides a simple API to trigger confirmation dialogs programmatically, making it easy to prompt users for confirmation before performing critical actions. It returns a function that opens the dialog and resolves with the user's response, allowing you to handle confirmation logic directly in your code.

Preview

Code

Styling for Negative Consequences

For actions with potentially negative consequences, such as deleting an item, apply the "destructive" variant to the <ConfirmationDialog>. This will automatically style the dialog and its primary action button to visually communicate a serious or irreversible operation

Props

Did you know? You can explore, test, and customize props live in Marigold's storybook. Watch the effects they have in real-time!

View Dialog stories

Dialog

aria-describedby?

string;

Identifies the element (or elements) that describes the object.

aria-details?

string;

Identifies the element (or elements) that provide a detailed, extended description for the object.

aria-label?

string;

Defines a string value that labels the current element.

aria-labelledby?

string;

Identifies the element (or elements) that labels the current element.

children?

ReactNode | ((opts: DialogRenderProps) => ReactNode);

Children of the dialog. A function may be provided to access a function to close the dialog.

closeButton?

boolean;

Show the close button.

dir?

string;

hidden?

boolean;

id?

string;

The element's unique identifier. See MDN.

inert?

boolean;

lang?

string;

onAnimationEnd?

AnimationEventHandler<HTMLElement>;

onAnimationEndCapture?

AnimationEventHandler<HTMLElement>;

onAnimationIteration?

AnimationEventHandler<HTMLElement>;

onAnimationIterationCapture?

AnimationEventHandler<HTMLElement>;

onAnimationStart?

AnimationEventHandler<HTMLElement>;

onAnimationStartCapture?

AnimationEventHandler<HTMLElement>;

onAuxClick?

MouseEventHandler<HTMLElement>;

onAuxClickCapture?

MouseEventHandler<HTMLElement>;

onClick?

MouseEventHandler<HTMLElement>;

onClickCapture?

MouseEventHandler<HTMLElement>;

onContextMenu?

MouseEventHandler<HTMLElement>;

onContextMenuCapture?

MouseEventHandler<HTMLElement>;

onDoubleClick?

MouseEventHandler<HTMLElement>;

onDoubleClickCapture?

MouseEventHandler<HTMLElement>;

onGotPointerCapture?

PointerEventHandler<HTMLElement>;

onGotPointerCaptureCapture?

PointerEventHandler<HTMLElement>;

onLostPointerCapture?

PointerEventHandler<HTMLElement>;

onLostPointerCaptureCapture?

PointerEventHandler<HTMLElement>;

onMouseDown?

MouseEventHandler<HTMLElement>;

onMouseDownCapture?

MouseEventHandler<HTMLElement>;

onMouseEnter?

MouseEventHandler<HTMLElement>;

onMouseLeave?

MouseEventHandler<HTMLElement>;

onMouseMove?

MouseEventHandler<HTMLElement>;

onMouseMoveCapture?

MouseEventHandler<HTMLElement>;

onMouseOut?

MouseEventHandler<HTMLElement>;

onMouseOutCapture?

MouseEventHandler<HTMLElement>;

onMouseOver?

MouseEventHandler<HTMLElement>;

onMouseOverCapture?

MouseEventHandler<HTMLElement>;

onMouseUp?

MouseEventHandler<HTMLElement>;

onMouseUpCapture?

MouseEventHandler<HTMLElement>;

onOpenChange?

(isOpen: boolean) => void;

Handler that is called when the overlay's open state changes.

onPointerCancel?

PointerEventHandler<HTMLElement>;

onPointerCancelCapture?

PointerEventHandler<HTMLElement>;

onPointerDown?

PointerEventHandler<HTMLElement>;

onPointerDownCapture?

PointerEventHandler<HTMLElement>;

onPointerEnter?

PointerEventHandler<HTMLElement>;

onPointerLeave?

PointerEventHandler<HTMLElement>;

onPointerMove?

PointerEventHandler<HTMLElement>;

onPointerMoveCapture?

PointerEventHandler<HTMLElement>;

onPointerOut?

PointerEventHandler<HTMLElement>;

onPointerOutCapture?

PointerEventHandler<HTMLElement>;

onPointerOver?

PointerEventHandler<HTMLElement>;

onPointerOverCapture?

PointerEventHandler<HTMLElement>;

onPointerUp?

PointerEventHandler<HTMLElement>;

onPointerUpCapture?

PointerEventHandler<HTMLElement>;

onScroll?

UIEventHandler<HTMLElement>;

onScrollCapture?

UIEventHandler<HTMLElement>;

onTouchCancel?

TouchEventHandler<HTMLElement>;

onTouchCancelCapture?

TouchEventHandler<HTMLElement>;

onTouchEnd?

TouchEventHandler<HTMLElement>;

onTouchEndCapture?

TouchEventHandler<HTMLElement>;

onTouchMove?

TouchEventHandler<HTMLElement>;

onTouchMoveCapture?

TouchEventHandler<HTMLElement>;

onTouchStart?

TouchEventHandler<HTMLElement>;

onTouchStartCapture?

TouchEventHandler<HTMLElement>;

onTransitionCancel?

TransitionEventHandler<HTMLElement>;

onTransitionCancelCapture?

TransitionEventHandler<HTMLElement>;

onTransitionEnd?

TransitionEventHandler<HTMLElement>;

onTransitionEndCapture?

TransitionEventHandler<HTMLElement>;

onTransitionRun?

TransitionEventHandler<HTMLElement>;

onTransitionRunCapture?

TransitionEventHandler<HTMLElement>;

onTransitionStart?

TransitionEventHandler<HTMLElement>;

onTransitionStartCapture?

TransitionEventHandler<HTMLElement>;

onWheel?

WheelEventHandler<HTMLElement>;

onWheelCapture?

WheelEventHandler<HTMLElement>;

open?

boolean;

Whether the overlay is open by default (controlled).

ref?

Ref<HTMLInputElement>;

Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}

role?

"dialog" | "alertdialog";

The accessibility role for the dialog.

Defaults to:

'dialog'

slot?

string | null;

A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.

translate?

"yes" | "no";

Dialog.Trigger

children

ReactNode;

className?

ClassNameOrFunction<ModalRenderProps>;

The CSS className for the element. A function may be provided to compute the class based on component state.

defaultOpen?

boolean;

Whether the overlay is open by default (uncontrolled).

dir?

string;

dismissable?

boolean;

hidden?

boolean;

inert?

boolean;

isEntering?

boolean;

Whether the modal is currently performing an entry animation.

isExiting?

boolean;

Whether the modal is currently performing an exit animation.

keyboardDismissable?

boolean;

lang?

string;

onAnimationEnd?

AnimationEventHandler<HTMLDivElement>;

onAnimationEndCapture?

AnimationEventHandler<HTMLDivElement>;

onAnimationIteration?

AnimationEventHandler<HTMLDivElement>;

onAnimationIterationCapture?

AnimationEventHandler<HTMLDivElement>;

onAnimationStart?

AnimationEventHandler<HTMLDivElement>;

onAnimationStartCapture?

AnimationEventHandler<HTMLDivElement>;

onAuxClick?

MouseEventHandler<HTMLDivElement>;

onAuxClickCapture?

MouseEventHandler<HTMLDivElement>;

onClick?

MouseEventHandler<HTMLDivElement>;

onClickCapture?

MouseEventHandler<HTMLDivElement>;

onContextMenu?

MouseEventHandler<HTMLDivElement>;

onContextMenuCapture?

MouseEventHandler<HTMLDivElement>;

onDoubleClick?

MouseEventHandler<HTMLDivElement>;

onDoubleClickCapture?

MouseEventHandler<HTMLDivElement>;

onGotPointerCapture?

PointerEventHandler<HTMLDivElement>;

onGotPointerCaptureCapture?

PointerEventHandler<HTMLDivElement>;

onLostPointerCapture?

PointerEventHandler<HTMLDivElement>;

onLostPointerCaptureCapture?

PointerEventHandler<HTMLDivElement>;

onMouseDown?

MouseEventHandler<HTMLDivElement>;

onMouseDownCapture?

MouseEventHandler<HTMLDivElement>;

onMouseEnter?

MouseEventHandler<HTMLDivElement>;

onMouseLeave?

MouseEventHandler<HTMLDivElement>;

onMouseMove?

MouseEventHandler<HTMLDivElement>;

onMouseMoveCapture?

MouseEventHandler<HTMLDivElement>;

onMouseOut?

MouseEventHandler<HTMLDivElement>;

onMouseOutCapture?

MouseEventHandler<HTMLDivElement>;

onMouseOver?

MouseEventHandler<HTMLDivElement>;

onMouseOverCapture?

MouseEventHandler<HTMLDivElement>;

onMouseUp?

MouseEventHandler<HTMLDivElement>;

onMouseUpCapture?

MouseEventHandler<HTMLDivElement>;

onOpenChange?

(isOpen: boolean) => void;

Handler that is called when the overlay's open state changes.

onPointerCancel?

PointerEventHandler<HTMLDivElement>;

onPointerCancelCapture?

PointerEventHandler<HTMLDivElement>;

onPointerDown?

PointerEventHandler<HTMLDivElement>;

onPointerDownCapture?

PointerEventHandler<HTMLDivElement>;

onPointerEnter?

PointerEventHandler<HTMLDivElement>;

onPointerLeave?

PointerEventHandler<HTMLDivElement>;

onPointerMove?

PointerEventHandler<HTMLDivElement>;

onPointerMoveCapture?

PointerEventHandler<HTMLDivElement>;

onPointerOut?

PointerEventHandler<HTMLDivElement>;

onPointerOutCapture?

PointerEventHandler<HTMLDivElement>;

onPointerOver?

PointerEventHandler<HTMLDivElement>;

onPointerOverCapture?

PointerEventHandler<HTMLDivElement>;

onPointerUp?

PointerEventHandler<HTMLDivElement>;

onPointerUpCapture?

PointerEventHandler<HTMLDivElement>;

onScroll?

UIEventHandler<HTMLDivElement>;

onScrollCapture?

UIEventHandler<HTMLDivElement>;

onTouchCancel?

TouchEventHandler<HTMLDivElement>;

onTouchCancelCapture?

TouchEventHandler<HTMLDivElement>;

onTouchEnd?

TouchEventHandler<HTMLDivElement>;

onTouchEndCapture?

TouchEventHandler<HTMLDivElement>;

onTouchMove?

TouchEventHandler<HTMLDivElement>;

onTouchMoveCapture?

TouchEventHandler<HTMLDivElement>;

onTouchStart?

TouchEventHandler<HTMLDivElement>;

onTouchStartCapture?

TouchEventHandler<HTMLDivElement>;

onTransitionCancel?

TransitionEventHandler<HTMLDivElement>;

onTransitionCancelCapture?

TransitionEventHandler<HTMLDivElement>;

onTransitionEnd?

TransitionEventHandler<HTMLDivElement>;

onTransitionEndCapture?

TransitionEventHandler<HTMLDivElement>;

onTransitionRun?

TransitionEventHandler<HTMLDivElement>;

onTransitionRunCapture?

TransitionEventHandler<HTMLDivElement>;

onTransitionStart?

TransitionEventHandler<HTMLDivElement>;

onTransitionStartCapture?

TransitionEventHandler<HTMLDivElement>;

onWheel?

WheelEventHandler<HTMLDivElement>;

onWheelCapture?

WheelEventHandler<HTMLDivElement>;

open?

boolean;

Whether the overlay is open by default (controlled).

shouldCloseOnInteractOutside?

(element: Element) => boolean;

When user interacts with the argument element outside of the overlay ref, return true if onClose should be called. This gives you a chance to filter out interaction with elements that should not dismiss the overlay. By default, onClose will always be called on interaction outside the overlay ref.

slot?

string | null;

translate?

"yes" | "no";

Dialog.Title

children?

ReactNode;

Children of the component.

Dialog.Content

children?

ReactNode;

Children of the component.

Dialog.Actions

children?

ReactNode;

Children of the component.

ConfirmationDialog

autoFocusButton?

"cancel" | "action";

Button to focus by default when the dialog opens.

cancelLabel?

string;

Optional label for the cancel button, default label is "cancel".

children?

ReactNode;

The dialog's content.

closeButton?

boolean;

Show the close button.

confirmationLabel

string;

Label for the primary action button.

onCancel?

() => void;

Handler that is called when the cancel button is pressed.

onConfirm?

() => void;

Handler that is called when the confirm button is pressed.

onOpenChange?

(isOpen: boolean) => void;

Handler that is called when the overlay's open state changes.

open?

boolean;

Whether the overlay is open by default (controlled).

title

string;

The dialog's title.

ConfirmationDialog.Trigger

children

ReactNode;

className?

ClassNameOrFunction<ModalRenderProps>;

The CSS className for the element. A function may be provided to compute the class based on component state.

defaultOpen?

boolean;

Whether the overlay is open by default (uncontrolled).

dir?

string;

dismissable?

boolean;

hidden?

boolean;

inert?

boolean;

isEntering?

boolean;

Whether the modal is currently performing an entry animation.

isExiting?

boolean;

Whether the modal is currently performing an exit animation.

keyboardDismissable?

boolean;

lang?

string;

onAnimationEnd?

AnimationEventHandler<HTMLDivElement>;

onAnimationEndCapture?

AnimationEventHandler<HTMLDivElement>;

onAnimationIteration?

AnimationEventHandler<HTMLDivElement>;

onAnimationIterationCapture?

AnimationEventHandler<HTMLDivElement>;

onAnimationStart?

AnimationEventHandler<HTMLDivElement>;

onAnimationStartCapture?

AnimationEventHandler<HTMLDivElement>;

onAuxClick?

MouseEventHandler<HTMLDivElement>;

onAuxClickCapture?

MouseEventHandler<HTMLDivElement>;

onClick?

MouseEventHandler<HTMLDivElement>;

onClickCapture?

MouseEventHandler<HTMLDivElement>;

onContextMenu?

MouseEventHandler<HTMLDivElement>;

onContextMenuCapture?

MouseEventHandler<HTMLDivElement>;

onDoubleClick?

MouseEventHandler<HTMLDivElement>;

onDoubleClickCapture?

MouseEventHandler<HTMLDivElement>;

onGotPointerCapture?

PointerEventHandler<HTMLDivElement>;

onGotPointerCaptureCapture?

PointerEventHandler<HTMLDivElement>;

onLostPointerCapture?

PointerEventHandler<HTMLDivElement>;

onLostPointerCaptureCapture?

PointerEventHandler<HTMLDivElement>;

onMouseDown?

MouseEventHandler<HTMLDivElement>;

onMouseDownCapture?

MouseEventHandler<HTMLDivElement>;

onMouseEnter?

MouseEventHandler<HTMLDivElement>;

onMouseLeave?

MouseEventHandler<HTMLDivElement>;

onMouseMove?

MouseEventHandler<HTMLDivElement>;

onMouseMoveCapture?

MouseEventHandler<HTMLDivElement>;

onMouseOut?

MouseEventHandler<HTMLDivElement>;

onMouseOutCapture?

MouseEventHandler<HTMLDivElement>;

onMouseOver?

MouseEventHandler<HTMLDivElement>;

onMouseOverCapture?

MouseEventHandler<HTMLDivElement>;

onMouseUp?

MouseEventHandler<HTMLDivElement>;

onMouseUpCapture?

MouseEventHandler<HTMLDivElement>;

onOpenChange?

(isOpen: boolean) => void;

Handler that is called when the overlay's open state changes.

onPointerCancel?

PointerEventHandler<HTMLDivElement>;

onPointerCancelCapture?

PointerEventHandler<HTMLDivElement>;

onPointerDown?

PointerEventHandler<HTMLDivElement>;

onPointerDownCapture?

PointerEventHandler<HTMLDivElement>;

onPointerEnter?

PointerEventHandler<HTMLDivElement>;

onPointerLeave?

PointerEventHandler<HTMLDivElement>;

onPointerMove?

PointerEventHandler<HTMLDivElement>;

onPointerMoveCapture?

PointerEventHandler<HTMLDivElement>;

onPointerOut?

PointerEventHandler<HTMLDivElement>;

onPointerOutCapture?

PointerEventHandler<HTMLDivElement>;

onPointerOver?

PointerEventHandler<HTMLDivElement>;

onPointerOverCapture?

PointerEventHandler<HTMLDivElement>;

onPointerUp?

PointerEventHandler<HTMLDivElement>;

onPointerUpCapture?

PointerEventHandler<HTMLDivElement>;

onScroll?

UIEventHandler<HTMLDivElement>;

onScrollCapture?

UIEventHandler<HTMLDivElement>;

onTouchCancel?

TouchEventHandler<HTMLDivElement>;

onTouchCancelCapture?

TouchEventHandler<HTMLDivElement>;

onTouchEnd?

TouchEventHandler<HTMLDivElement>;

onTouchEndCapture?

TouchEventHandler<HTMLDivElement>;

onTouchMove?

TouchEventHandler<HTMLDivElement>;

onTouchMoveCapture?

TouchEventHandler<HTMLDivElement>;

onTouchStart?

TouchEventHandler<HTMLDivElement>;

onTouchStartCapture?

TouchEventHandler<HTMLDivElement>;

onTransitionCancel?

TransitionEventHandler<HTMLDivElement>;

onTransitionCancelCapture?

TransitionEventHandler<HTMLDivElement>;

onTransitionEnd?

TransitionEventHandler<HTMLDivElement>;

onTransitionEndCapture?

TransitionEventHandler<HTMLDivElement>;

onTransitionRun?

TransitionEventHandler<HTMLDivElement>;

onTransitionRunCapture?

TransitionEventHandler<HTMLDivElement>;

onTransitionStart?

TransitionEventHandler<HTMLDivElement>;

onTransitionStartCapture?

TransitionEventHandler<HTMLDivElement>;

onWheel?

WheelEventHandler<HTMLDivElement>;

onWheelCapture?

WheelEventHandler<HTMLDivElement>;

open?

boolean;

Whether the overlay is open by default (controlled).

shouldCloseOnInteractOutside?

(element: Element) => boolean;

slot?

string | null;

translate?

"yes" | "no";

Last update: 9 minutes ago

Anatomy

Appearance

Variant

Size

The selected theme does not has any options for "variant".

Property	Type	Description
`variant`	`-`	The available variants of this component.
`size`	`xsmall \| small \| medium`	The available sizes of this component.

Usage

Use a dialog when

an immediate response is needed to continue a user-initiated process,
to notify the user of urgent information related to their task, or
to confirm a user decision.

Labeling

<Dialog aria-label="delete event">
  <Dialog.Title>Are you sure you want to delete this event?</Dialog.Title>
  <Dialog.Actions>
    <Button variant="secondary" slot="close">
      Cancel
    </Button>
    <Button variant="destructive">Delete</Button>
  </Dialog.Actions>
</Dialog>

Content

Preview

Code

Dismissal

When a dialog is open, users cannot interact with the rest of the page until the dialog is closed. To accommodate both mouse and keyboard users, the <Dialog> provides multiple ways to close it:

pressing the close button (slot="close") inside <Dialog.Actions>,
using the close button (indicated by an "x"),
pressing the "Esc" key, or
clicking on the underlay (the dimmed background).

Preview

Code

Dedicated close button

To conveniently create a close button for a dialog, set the slot prop to "close" on any <Button> within <Dialog.Actions> component. Pressing the button will then close the dialog.

Role

Confirmation

Preview

Code

Styling for Negative Consequences

Props

Did you know? You can explore, test, and customize props live in Marigold's storybook. Watch the effects they have in real-time!

View Dialog stories

Dialog

aria-describedby?

string;

Identifies the element (or elements) that describes the object.

aria-details?

string;

Identifies the element (or elements) that provide a detailed, extended description for the object.

aria-label?

string;

Defines a string value that labels the current element.

aria-labelledby?

string;

Identifies the element (or elements) that labels the current element.

children?

ReactNode | ((opts: DialogRenderProps) => ReactNode);

Children of the dialog. A function may be provided to access a function to close the dialog.

closeButton?

boolean;

Show the close button.

dir?

string;

hidden?

boolean;

id?

string;

The element's unique identifier. See MDN.

inert?

boolean;

lang?

string;

onAnimationEnd?

AnimationEventHandler<HTMLElement>;

onAnimationEndCapture?

AnimationEventHandler<HTMLElement>;

onAnimationIteration?

AnimationEventHandler<HTMLElement>;

onAnimationIterationCapture?

AnimationEventHandler<HTMLElement>;

onAnimationStart?

AnimationEventHandler<HTMLElement>;

onAnimationStartCapture?

AnimationEventHandler<HTMLElement>;

onAuxClick?

MouseEventHandler<HTMLElement>;

onAuxClickCapture?

MouseEventHandler<HTMLElement>;

onClick?

MouseEventHandler<HTMLElement>;

onClickCapture?

MouseEventHandler<HTMLElement>;

onContextMenu?

MouseEventHandler<HTMLElement>;

onContextMenuCapture?

MouseEventHandler<HTMLElement>;

onDoubleClick?

MouseEventHandler<HTMLElement>;

onDoubleClickCapture?

MouseEventHandler<HTMLElement>;

onGotPointerCapture?

PointerEventHandler<HTMLElement>;

onGotPointerCaptureCapture?

PointerEventHandler<HTMLElement>;

onLostPointerCapture?

PointerEventHandler<HTMLElement>;

onLostPointerCaptureCapture?

PointerEventHandler<HTMLElement>;

onMouseDown?

MouseEventHandler<HTMLElement>;

onMouseDownCapture?

MouseEventHandler<HTMLElement>;

onMouseEnter?

MouseEventHandler<HTMLElement>;

onMouseLeave?

MouseEventHandler<HTMLElement>;

onMouseMove?

MouseEventHandler<HTMLElement>;

onMouseMoveCapture?

MouseEventHandler<HTMLElement>;

onMouseOut?

MouseEventHandler<HTMLElement>;

onMouseOutCapture?

MouseEventHandler<HTMLElement>;

onMouseOver?

MouseEventHandler<HTMLElement>;

onMouseOverCapture?

MouseEventHandler<HTMLElement>;

onMouseUp?

MouseEventHandler<HTMLElement>;

onMouseUpCapture?

MouseEventHandler<HTMLElement>;

onOpenChange?

(isOpen: boolean) => void;

Handler that is called when the overlay's open state changes.

onPointerCancel?

PointerEventHandler<HTMLElement>;

onPointerCancelCapture?

PointerEventHandler<HTMLElement>;

onPointerDown?

PointerEventHandler<HTMLElement>;

onPointerDownCapture?

PointerEventHandler<HTMLElement>;

onPointerEnter?

PointerEventHandler<HTMLElement>;

onPointerLeave?

PointerEventHandler<HTMLElement>;

onPointerMove?

PointerEventHandler<HTMLElement>;

onPointerMoveCapture?

PointerEventHandler<HTMLElement>;

onPointerOut?

PointerEventHandler<HTMLElement>;

onPointerOutCapture?

PointerEventHandler<HTMLElement>;

onPointerOver?

PointerEventHandler<HTMLElement>;

onPointerOverCapture?

PointerEventHandler<HTMLElement>;

onPointerUp?

PointerEventHandler<HTMLElement>;

onPointerUpCapture?

PointerEventHandler<HTMLElement>;

onScroll?

UIEventHandler<HTMLElement>;

onScrollCapture?

UIEventHandler<HTMLElement>;

onTouchCancel?

TouchEventHandler<HTMLElement>;

onTouchCancelCapture?

TouchEventHandler<HTMLElement>;

onTouchEnd?

TouchEventHandler<HTMLElement>;

onTouchEndCapture?

TouchEventHandler<HTMLElement>;

onTouchMove?

TouchEventHandler<HTMLElement>;

onTouchMoveCapture?

TouchEventHandler<HTMLElement>;

onTouchStart?

TouchEventHandler<HTMLElement>;

onTouchStartCapture?

TouchEventHandler<HTMLElement>;

onTransitionCancel?

TransitionEventHandler<HTMLElement>;

onTransitionCancelCapture?

TransitionEventHandler<HTMLElement>;

onTransitionEnd?

TransitionEventHandler<HTMLElement>;

onTransitionEndCapture?

TransitionEventHandler<HTMLElement>;

onTransitionRun?

TransitionEventHandler<HTMLElement>;

onTransitionRunCapture?

TransitionEventHandler<HTMLElement>;

onTransitionStart?

TransitionEventHandler<HTMLElement>;

onTransitionStartCapture?

TransitionEventHandler<HTMLElement>;

onWheel?

WheelEventHandler<HTMLElement>;

onWheelCapture?

WheelEventHandler<HTMLElement>;

open?

boolean;

Whether the overlay is open by default (controlled).

ref?

Ref<HTMLInputElement>;

role?

"dialog" | "alertdialog";

The accessibility role for the dialog.

Defaults to:

'dialog'

slot?

string | null;

translate?

"yes" | "no";

Dialog.Trigger

children

ReactNode;

className?

ClassNameOrFunction<ModalRenderProps>;

The CSS className for the element. A function may be provided to compute the class based on component state.

defaultOpen?

boolean;

Whether the overlay is open by default (uncontrolled).

dir?

string;

dismissable?

boolean;

hidden?

boolean;

inert?

boolean;

isEntering?

boolean;

Whether the modal is currently performing an entry animation.

isExiting?

boolean;

Whether the modal is currently performing an exit animation.

keyboardDismissable?

boolean;

lang?

string;

onAnimationEnd?

AnimationEventHandler<HTMLDivElement>;

onAnimationEndCapture?

AnimationEventHandler<HTMLDivElement>;

onAnimationIteration?

AnimationEventHandler<HTMLDivElement>;

onAnimationIterationCapture?

AnimationEventHandler<HTMLDivElement>;

onAnimationStart?

AnimationEventHandler<HTMLDivElement>;

onAnimationStartCapture?

AnimationEventHandler<HTMLDivElement>;

onAuxClick?

MouseEventHandler<HTMLDivElement>;

onAuxClickCapture?

MouseEventHandler<HTMLDivElement>;

onClick?

MouseEventHandler<HTMLDivElement>;

onClickCapture?

MouseEventHandler<HTMLDivElement>;

onContextMenu?

MouseEventHandler<HTMLDivElement>;

onContextMenuCapture?

MouseEventHandler<HTMLDivElement>;

onDoubleClick?

MouseEventHandler<HTMLDivElement>;

onDoubleClickCapture?

MouseEventHandler<HTMLDivElement>;

onGotPointerCapture?

PointerEventHandler<HTMLDivElement>;

onGotPointerCaptureCapture?

PointerEventHandler<HTMLDivElement>;

onLostPointerCapture?

PointerEventHandler<HTMLDivElement>;

onLostPointerCaptureCapture?

PointerEventHandler<HTMLDivElement>;

onMouseDown?

MouseEventHandler<HTMLDivElement>;

onMouseDownCapture?

MouseEventHandler<HTMLDivElement>;

onMouseEnter?

MouseEventHandler<HTMLDivElement>;

onMouseLeave?

MouseEventHandler<HTMLDivElement>;

onMouseMove?

MouseEventHandler<HTMLDivElement>;

onMouseMoveCapture?

MouseEventHandler<HTMLDivElement>;

onMouseOut?

MouseEventHandler<HTMLDivElement>;

onMouseOutCapture?

MouseEventHandler<HTMLDivElement>;

onMouseOver?

MouseEventHandler<HTMLDivElement>;

onMouseOverCapture?

MouseEventHandler<HTMLDivElement>;

onMouseUp?

MouseEventHandler<HTMLDivElement>;

onMouseUpCapture?

MouseEventHandler<HTMLDivElement>;

onOpenChange?

(isOpen: boolean) => void;

Handler that is called when the overlay's open state changes.

onPointerCancel?

PointerEventHandler<HTMLDivElement>;

onPointerCancelCapture?

PointerEventHandler<HTMLDivElement>;

onPointerDown?

PointerEventHandler<HTMLDivElement>;

onPointerDownCapture?

PointerEventHandler<HTMLDivElement>;

onPointerEnter?

PointerEventHandler<HTMLDivElement>;

onPointerLeave?

PointerEventHandler<HTMLDivElement>;

onPointerMove?

PointerEventHandler<HTMLDivElement>;

onPointerMoveCapture?

PointerEventHandler<HTMLDivElement>;

onPointerOut?

PointerEventHandler<HTMLDivElement>;

onPointerOutCapture?

PointerEventHandler<HTMLDivElement>;

onPointerOver?

PointerEventHandler<HTMLDivElement>;

onPointerOverCapture?

PointerEventHandler<HTMLDivElement>;

onPointerUp?

PointerEventHandler<HTMLDivElement>;

onPointerUpCapture?

PointerEventHandler<HTMLDivElement>;

onScroll?

UIEventHandler<HTMLDivElement>;

onScrollCapture?

UIEventHandler<HTMLDivElement>;

onTouchCancel?

TouchEventHandler<HTMLDivElement>;

onTouchCancelCapture?

TouchEventHandler<HTMLDivElement>;

onTouchEnd?

TouchEventHandler<HTMLDivElement>;

onTouchEndCapture?

TouchEventHandler<HTMLDivElement>;

onTouchMove?

TouchEventHandler<HTMLDivElement>;

onTouchMoveCapture?

TouchEventHandler<HTMLDivElement>;

onTouchStart?

TouchEventHandler<HTMLDivElement>;

onTouchStartCapture?

TouchEventHandler<HTMLDivElement>;

onTransitionCancel?

TransitionEventHandler<HTMLDivElement>;

onTransitionCancelCapture?

TransitionEventHandler<HTMLDivElement>;

onTransitionEnd?

TransitionEventHandler<HTMLDivElement>;

onTransitionEndCapture?

TransitionEventHandler<HTMLDivElement>;

onTransitionRun?

TransitionEventHandler<HTMLDivElement>;

onTransitionRunCapture?

TransitionEventHandler<HTMLDivElement>;

onTransitionStart?

TransitionEventHandler<HTMLDivElement>;

onTransitionStartCapture?

TransitionEventHandler<HTMLDivElement>;

onWheel?

WheelEventHandler<HTMLDivElement>;

onWheelCapture?

WheelEventHandler<HTMLDivElement>;

open?

boolean;

Whether the overlay is open by default (controlled).

shouldCloseOnInteractOutside?

(element: Element) => boolean;

slot?

string | null;

translate?

"yes" | "no";

Dialog.Title

children?

ReactNode;

Children of the component.

Dialog.Content

children?

ReactNode;

Children of the component.

Dialog.Actions

children?

ReactNode;

Children of the component.

ConfirmationDialog

autoFocusButton?

"cancel" | "action";

Button to focus by default when the dialog opens.

cancelLabel?

string;

Optional label for the cancel button, default label is "cancel".

children?

ReactNode;

The dialog's content.

closeButton?

boolean;

Show the close button.

confirmationLabel

string;

Label for the primary action button.

onCancel?

() => void;

Handler that is called when the cancel button is pressed.

onConfirm?

() => void;

Handler that is called when the confirm button is pressed.

onOpenChange?

(isOpen: boolean) => void;

Handler that is called when the overlay's open state changes.

open?

boolean;

Whether the overlay is open by default (controlled).

title

string;

The dialog's title.

ConfirmationDialog.Trigger

children

ReactNode;

className?

ClassNameOrFunction<ModalRenderProps>;

The CSS className for the element. A function may be provided to compute the class based on component state.

defaultOpen?

boolean;

Whether the overlay is open by default (uncontrolled).

dir?

string;

dismissable?

boolean;

hidden?

boolean;

inert?

boolean;

isEntering?

boolean;

Whether the modal is currently performing an entry animation.

isExiting?

boolean;

Whether the modal is currently performing an exit animation.

keyboardDismissable?

boolean;

lang?

string;

onAnimationEnd?

AnimationEventHandler<HTMLDivElement>;

onAnimationEndCapture?

AnimationEventHandler<HTMLDivElement>;

onAnimationIteration?

AnimationEventHandler<HTMLDivElement>;

onAnimationIterationCapture?

AnimationEventHandler<HTMLDivElement>;

onAnimationStart?

AnimationEventHandler<HTMLDivElement>;

onAnimationStartCapture?

AnimationEventHandler<HTMLDivElement>;

onAuxClick?

MouseEventHandler<HTMLDivElement>;

onAuxClickCapture?

MouseEventHandler<HTMLDivElement>;

onClick?

MouseEventHandler<HTMLDivElement>;

onClickCapture?

MouseEventHandler<HTMLDivElement>;

onContextMenu?

MouseEventHandler<HTMLDivElement>;

onContextMenuCapture?

MouseEventHandler<HTMLDivElement>;

onDoubleClick?

MouseEventHandler<HTMLDivElement>;

onDoubleClickCapture?

MouseEventHandler<HTMLDivElement>;

onGotPointerCapture?

PointerEventHandler<HTMLDivElement>;

onGotPointerCaptureCapture?

PointerEventHandler<HTMLDivElement>;

onLostPointerCapture?

PointerEventHandler<HTMLDivElement>;

onLostPointerCaptureCapture?

PointerEventHandler<HTMLDivElement>;

onMouseDown?

MouseEventHandler<HTMLDivElement>;

onMouseDownCapture?

MouseEventHandler<HTMLDivElement>;

onMouseEnter?

MouseEventHandler<HTMLDivElement>;

onMouseLeave?

MouseEventHandler<HTMLDivElement>;

onMouseMove?

MouseEventHandler<HTMLDivElement>;

onMouseMoveCapture?

MouseEventHandler<HTMLDivElement>;

onMouseOut?

MouseEventHandler<HTMLDivElement>;

onMouseOutCapture?

MouseEventHandler<HTMLDivElement>;

onMouseOver?

MouseEventHandler<HTMLDivElement>;

onMouseOverCapture?

MouseEventHandler<HTMLDivElement>;

onMouseUp?

MouseEventHandler<HTMLDivElement>;

onMouseUpCapture?

MouseEventHandler<HTMLDivElement>;

onOpenChange?

(isOpen: boolean) => void;

Handler that is called when the overlay's open state changes.

onPointerCancel?

PointerEventHandler<HTMLDivElement>;

onPointerCancelCapture?

PointerEventHandler<HTMLDivElement>;

onPointerDown?

PointerEventHandler<HTMLDivElement>;

onPointerDownCapture?

PointerEventHandler<HTMLDivElement>;

onPointerEnter?

PointerEventHandler<HTMLDivElement>;

onPointerLeave?

PointerEventHandler<HTMLDivElement>;

onPointerMove?

PointerEventHandler<HTMLDivElement>;

onPointerMoveCapture?

PointerEventHandler<HTMLDivElement>;

onPointerOut?

PointerEventHandler<HTMLDivElement>;

onPointerOutCapture?

PointerEventHandler<HTMLDivElement>;

onPointerOver?

PointerEventHandler<HTMLDivElement>;

onPointerOverCapture?

PointerEventHandler<HTMLDivElement>;

onPointerUp?

PointerEventHandler<HTMLDivElement>;

onPointerUpCapture?

PointerEventHandler<HTMLDivElement>;

onScroll?

UIEventHandler<HTMLDivElement>;

onScrollCapture?

UIEventHandler<HTMLDivElement>;

onTouchCancel?

TouchEventHandler<HTMLDivElement>;

onTouchCancelCapture?

TouchEventHandler<HTMLDivElement>;

onTouchEnd?

TouchEventHandler<HTMLDivElement>;

onTouchEndCapture?

TouchEventHandler<HTMLDivElement>;

onTouchMove?

TouchEventHandler<HTMLDivElement>;

onTouchMoveCapture?

TouchEventHandler<HTMLDivElement>;

onTouchStart?

TouchEventHandler<HTMLDivElement>;

onTouchStartCapture?

TouchEventHandler<HTMLDivElement>;

onTransitionCancel?

TransitionEventHandler<HTMLDivElement>;

onTransitionCancelCapture?

TransitionEventHandler<HTMLDivElement>;

onTransitionEnd?

TransitionEventHandler<HTMLDivElement>;

onTransitionEndCapture?

TransitionEventHandler<HTMLDivElement>;

onTransitionRun?

TransitionEventHandler<HTMLDivElement>;

onTransitionRunCapture?

TransitionEventHandler<HTMLDivElement>;

onTransitionStart?

TransitionEventHandler<HTMLDivElement>;

onTransitionStartCapture?

TransitionEventHandler<HTMLDivElement>;

onWheel?

WheelEventHandler<HTMLDivElement>;

onWheelCapture?

WheelEventHandler<HTMLDivElement>;

open?

boolean;

Whether the overlay is open by default (controlled).

shouldCloseOnInteractOutside?

(element: Element) => boolean;

slot?

string | null;

translate?

"yes" | "no";

Last update: 9 minutes ago