A dialog consists of a container element, title, and optional description. It is an overlay shown above other content in an application.

The Fuegokit React dialog primitive provides the behavior and accessibility implementation for a dialog component.

Import

import { Dialog } from "@fuegokit/react/experimental";

Additional styling guides and examples are coming soon. For now, explore the examples at Storybook.

Usage

<Dialog>
  <Dialog.Trigger asChild>
    <DialogButton>Edit profile</DialogButton>
  </Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Overlay />
    <Dialog.Content>
      <Dialog.Title>Edit profile</Dialog.Title>
      <Dialog.Description>

Styling

To apply styles, use Fuegokit React's themeGet function to access Fuegokit Tokens directly.

const MyDialog = styled(Dialog)`
  /* reset */
  button,
  fieldset,
  input {
    all: unset;
  }
`
const MyDialogOverlay = styled(Dialog.Overlay)`

Props

Dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

Name	Type	Default	Description
defaultOpen	boolean	-	The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.
open	boolean	-	The controlled open state of the dialog. Must be used in conjunction with `onOpenChange`.
onOpenChange	(open: boolean) => void	-	Event handler called when the open state of the dialog changes.
defaultOpen	boolean	true	The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.
modal	boolean	true	The modality of the dialog. When set to `true`, interaction with outside elements will be disabled and only dialog content will be visible to screen readers.
children	React.ReactNode	true	Children to render in the dialog

Dialog.Trigger

The button that opens the dialog.

Name	Type	Default	Description
asChild	boolean	false	Change the default rendered element for the one passed as a child, merging their props and behavior.

Data attributes

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

Dialog.Portal

When used, portals your overlay and content parts into the `body`.

Name	Type	Default	Description
forceMount	boolean	-	Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. If used on this part, it will be inherited by `Dialog.Overlay` and `Dialog.Content`.
container	HTMLElement	document.body	Specify a container element to portal the content into.

Dialog.Overlay

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

Name	Type	Default	Description
asChild	boolean	false	Change the default rendered element for the one passed as a child, merging their props and behavior.
forceMount	boolean	-	Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. If used on this part, it will be inherited by `Dialog.Overlay` and `Dialog.Content`.

Data attributes

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

Dialog.Content

Contains content to be rendered in the open dialog.

Name	Type	Default	Description
asChild	boolean	false	Change the default rendered element for the one passed as a child, merging their props and behavior.
forceMount	boolean	-	Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. If used on this part, it will be inherited by `Dialog.Portal`.

Events

Name	Type	Default	Description
onOpenAutoFocus	(event: Event) => void	-	Event handler called when focus moves into the component after opening. It can be prevented by calling `event.preventDefault`.
onCloseAutoFocus	(event: Event) => void	-	Event handler called when focus moves to the trigger after closing. It can be prevented by calling `event.preventDefault`.
onEscapeKeyDown	(event: Event) => void	-	Event handler called when the escape key is down. It can be prevented by calling `event.preventDefault`.
onPointerDownOutside	(event: PointerDownOutsideEvent) => void	-	Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling `event.preventDefault`.
onInteractOutside	(event: PointerDownOutsideEvent \| FocusOutsideEvent) => void	-	Event handler called when an interaction (pointer or focus event) happens outside the bounds of the component. It can be prevented by calling `event.preventDefault`.

Data attributes

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

Dialog.Close

The button that closes the dialog.

Name	Type	Default	Description
asChild	boolean	false	Change the default rendered element for the one passed as a child, merging their props and behavior.

Dialog.Title

An optional accessible description to be announced when the dialog is opened. If you want to hide the title, wrap it inside a <VisuallyHidden> utility.

Name	Type	Default	Description
asChild	boolean	false	Change the default rendered element for the one passed as a child, merging their props and behavior.

Dialog.Description

An optional accessible description to be announced when the dialog is opened. If you want to hide the description, wrap it inside a <VisuallyHidden> utility. If you want to remove the description entirely, remove this part and pass `aria-describedby={undefined}` to `Dialog.Content`.

Name	Type	Default	Description
asChild	boolean	false	Change the default rendered element for the one passed as a child, merging their props and behavior.