Dialog

Sizes

The dialog component has two sizes: sm and md. Size governs the width of the dialog, as well as the content's spacing, font size, and padding.

Indicator Emphasis

Use the emphasis prop to change the intent of the dialog's indicator icon.

Placement

Use the placement prop to change the placement of the dialog.

Controlled State

Dialog visibility can be controlled using the open, onOpenChange and defaultOpen props. These props follow our controlled state pattern.

Outside Scroll

The default scrollBehavior is outside, which makes the entire page scrollable when modal content exceeds viewport height. The modal and backdrop move with the page scroll instead of creating an internal scroll area within the modal.

Inside Scroll

Set the scrollBehavior prop to inside to create an internal scroll area within the modal.

Alert Dialog

Set the role prop to alertdialog to change the dialog component to an alert dialog. This is recommended for situations where the dialog is used to notify users of urgent information that demands their immediate attention.

<Dialog.FloatingPortal>

A helper component that combines the portal, positioner, and content components. This shortcut is equivalent to:

<Portal {...props}>
  <Dialog.Backdrop {...backdropProps} />
  <Dialog.Positioner {...positionerProps}>
    <Dialog.Content {...contentProps}>{children}</Dialog.Content>
  </Dialog.Positioner>
</Portal>

<Dialog.Root>

ReactNode

string

boolean

true

boolean

true

boolean

false

'ltr' | 'rtl'

'ltr'

| 'info'
| 'success'
| 'warning'
| 'danger'
| 'neutral'

'neutral'

() => HTMLElement

() =>
| Node
| ShadowRoot
| Document

boolean

() => HTMLElement

boolean

false

boolean

true

(
  event: KeyboardEvent,
) => void

VoidFunction

(
  event: FocusOutsideEvent,
) => void

(
  event: InteractOutsideEvent,
) => void

(
  open: boolean,
) => void

(
  event: PointerDownOutsideEvent,
) => void

(
  event: CustomEvent<{
    originalIndex: number
    originalLayer: HTMLElement
    targetIndex: number
    targetLayer: HTMLElement
  }>,
) => void

boolean

Array<
  () => Element
>

| 'top'
| 'center'
| 'bottom'

'top'

boolean

boolean

true

boolean

true

| 'dialog'
| 'alertdialog'

'dialog'

| 'inside'
| 'outside'

'outside'

'sm' | 'md'

'sm'

boolean

false

boolean

true

boolean

false

ReactNode

string

boolean

boolean

boolean

'ltr' | 'rtl'

| 'info'
| 'success'
| 'warning'
| 'danger'
| 'neutral'

() => HTMLElement

() =>
| Node
| ShadowRoot
| Document

boolean

() => HTMLElement

boolean

boolean

(
  event: KeyboardEvent,
) => void

VoidFunction

(
  event: FocusOutsideEvent,
) => void

(
  event: InteractOutsideEvent,
) => void

(
  open: boolean,
) => void

(
  event: PointerDownOutsideEvent,
) => void

(
  event: CustomEvent<{
    originalIndex: number
    originalLayer: HTMLElement
    targetIndex: number
    targetLayer: HTMLElement
  }>,
) => void

boolean

Array<
  () => Element
>

| 'top'
| 'center'
| 'bottom'

boolean

boolean

boolean

| 'dialog'
| 'alertdialog'

| 'inside'
| 'outside'

'sm' | 'md'

boolean

boolean

boolean

<Dialog.Backdrop>

ReactNode

string

| ReactElement
| ((
    props: object,
  ) => ReactElement)

ReactNode

string

| ReactElement
| ((
    props: object,
  ) => ReactElement)

'qui-dialog__backdrop'

'backdrop'

'dialog'

| 'open'
| 'closed'

boolean

'qui-dialog__backdrop'

'backdrop'

'dialog'

| 'open'
| 'closed'

boolean

<Dialog.Positioner>

ReactNode

string

| ReactElement
| ((
    props: object,
  ) => ReactElement)

ReactNode

string

| ReactElement
| ((
    props: object,
  ) => ReactElement)

'qui-dialog__positioner'

| 'top'
| 'center'
| 'bottom'

| 'inside'
| 'outside'

'sm' | 'md'

'qui-dialog__positioner'

| 'top'
| 'center'
| 'bottom'

| 'inside'
| 'outside'

'sm' | 'md'

<Dialog.Content>

<Dialog.Root>
  <Dialog.Positioner>
    <Dialog.Content></Dialog.Content>
  </Dialog.Positioner>
</Dialog.Root>

ReactNode

string

| ReactElement
| ((
    props: object,
  ) => ReactElement)

ReactNode

string

| ReactElement
| ((
    props: object,
  ) => ReactElement)

'qui-dialog__content'

'content'

'dialog'

| 'inside'
| 'outside'

'sm' | 'md'

| 'open'
| 'closed'

boolean

-1

'qui-dialog__content'

'content'

'dialog'

| 'inside'
| 'outside'

'sm' | 'md'

| 'open'
| 'closed'

boolean

-1

<Dialog.Body>

ReactNode

| ReactElement
| ((
    props: object,
  ) => ReactElement)

ReactNode

| ReactElement
| ((
    props: object,
  ) => ReactElement)

'qui-dialog__body'

'body'

'dialog'

'sm' | 'md'

'qui-dialog__body'

'body'

'dialog'

'sm' | 'md'

<Dialog.Heading>

<Dialog.Content>
  <Dialog.Body>
    <Dialog.Heading>Title...</Dialog.Heading>
    // ... other
  </Dialog.Body>
</Dialog.Content>

ReactNode

string

| ReactElement
| ((
    props: object,
  ) => ReactElement)

ReactNode

string

| ReactElement
| ((
    props: object,
  ) => ReactElement)

'qui-dialog__heading'

'heading'

'dialog'

'sm' | 'md'

'qui-dialog__heading'

'heading'

'dialog'

'sm' | 'md'

<Dialog.Footer>

ReactNode

| ReactElement
| ((
    props: object,
  ) => ReactElement)

ReactNode

| ReactElement
| ((
    props: object,
  ) => ReactElement)

'qui-dialog__footer'

'footer'

'dialog'

'sm' | 'md'

'qui-dialog__footer'

'footer'

'dialog'

'sm' | 'md'

<Dialog.IndicatorIcon>

| LucideIcon
| ReactNode

| ReactElement
| ((
    props: object,
  ) => ReactElement)

| LucideIcon
| ReactNode

| ReactElement
| ((
    props: object,
  ) => ReactElement)

'qui-dialog__indicator-icon'

| 'info'
| 'success'
| 'warning'
| 'danger'
| 'neutral'

'sm' | 'md'

'qui-dialog__indicator-icon'

| 'info'
| 'success'
| 'warning'
| 'danger'
| 'neutral'

'sm' | 'md'

<Dialog.CloseButton>

LucideIcon

X

string

| ReactElement
| ((
    props: object,
  ) => ReactElement)

LucideIcon

string

| ReactElement
| ((
    props: object,
  ) => ReactElement)

'qui-dialog__close-button'

'close-trigger'

'dialog'

'qui-dialog__close-button'

'close-trigger'

'dialog'