Dialog

A dialog is a focused, overlay-based container used to present critical information or request user input that requires immediate attention. It appears above the application content, blocks underlying interaction, and guides the user toward a required decision or acknowledgement.

import {Dialog} from "@qualcomm-ui/react/dialog"

Examples

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.

Brand

import type {ReactElement} from "react"

import {Button} from "@qualcomm-ui/react/button"
import {Dialog, useQdsDialogContext} from "@qualcomm-ui/react/dialog"
import {LoremIpsum} from "@qualcomm-ui/react-core/lorem-ipsum"

export function DialogSizesDemo(): ReactElement {
  return (
    <div className="flex flex-col gap-4">
      <Dialog.Root size="sm">
        <Dialog.Trigger>
          <Button emphasis="primary" variant="fill">
            Open Dialog (sm)
          </Button>
        </Dialog.Trigger>
        <DialogContent />
      </Dialog.Root>

      <Dialog.Root size="md">
        <Dialog.Trigger>
          <Button emphasis="primary" variant="fill">
            Open Dialog (md)
          </Button>
        </Dialog.Trigger>
        <DialogContent />
      </Dialog.Root>
    </div>
  )
}

function DialogContent() {
  const context = useQdsDialogContext()
  return (
    <Dialog.FloatingPortal>
      <Dialog.Body>
        <Dialog.Heading>Dialog Title ({context.size})</Dialog.Heading>
        <Dialog.CloseButton />
        <Dialog.Description>
          <LoremIpsum />
        </Dialog.Description>
      </Dialog.Body>

      <Dialog.Footer>
        <Dialog.CloseTrigger>
          <Button size="sm" variant="outline">
            Cancel
          </Button>
        </Dialog.CloseTrigger>
        <Dialog.CloseTrigger>
          <Button emphasis="primary" size="sm" variant="fill">
            Confirm
          </Button>
        </Dialog.CloseTrigger>
      </Dialog.Footer>
    </Dialog.FloatingPortal>
  )
}

Indicator Emphasis

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

Brand

import type {ReactElement} from "react"

import type {QdsDialogEmphasis} from "@qualcomm-ui/qds-core/dialog"
import {Button} from "@qualcomm-ui/react/button"
import {Dialog} from "@qualcomm-ui/react/dialog"
import {LoremIpsum} from "@qualcomm-ui/react-core/lorem-ipsum"

const emphasis: QdsDialogEmphasis[] = [
  "neutral",
  "info",
  "success",
  "warning",
  "danger",
]

export function DialogEmphasisDemo(): ReactElement {
  return (
    <div className="flex flex-col gap-4">
      {emphasis.map((emp) => (
        <Dialog.Root key={emp} emphasis={emp}>
          <Dialog.Trigger>
            <Button size="sm" variant="outline">
              {emp}
            </Button>
          </Dialog.Trigger>
          <DialogContent />
        </Dialog.Root>
      ))}
    </div>
  )
}

function DialogContent() {
  return (
    <Dialog.FloatingPortal>
      <Dialog.Body>
        <Dialog.CloseButton />
        <Dialog.IndicatorIcon />
        <Dialog.Heading>Dialog Title</Dialog.Heading>
        <Dialog.Description>
          <LoremIpsum />
        </Dialog.Description>
      </Dialog.Body>

      <Dialog.Footer>
        <Dialog.CloseTrigger>
          <Button emphasis="primary" size="sm" variant="fill">
            Confirm
          </Button>
        </Dialog.CloseTrigger>
      </Dialog.Footer>
    </Dialog.FloatingPortal>
  )
}

Placement

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

Brand

import type {ReactElement} from "react"

import type {QdsDialogPlacement} from "@qualcomm-ui/qds-core/dialog"
import {Button} from "@qualcomm-ui/react/button"
import {Dialog} from "@qualcomm-ui/react/dialog"

const placement: QdsDialogPlacement[] = ["top", "center", "bottom"]

export function DialogPlacementDemo(): ReactElement {
  return (
    <div className="flex flex-col gap-4">
      {placement.map((plc) => (
        <Dialog.Root key={plc} placement={plc}>
          <Dialog.Trigger>
            <Button emphasis="neutral" size="sm" variant="outline">
              Open Dialog ({plc})
            </Button>
          </Dialog.Trigger>
          <Dialog.FloatingPortal>
            <Dialog.Body>
              <Dialog.Heading>Dialog Title</Dialog.Heading>
              <Dialog.CloseButton />
              <Dialog.Description>Dialog Description</Dialog.Description>
            </Dialog.Body>

            <Dialog.Footer>
              <Dialog.CloseTrigger>
                <Button emphasis="primary" size="sm" variant="fill">
                  Confirm
                </Button>
              </Dialog.CloseTrigger>
            </Dialog.Footer>
          </Dialog.FloatingPortal>
        </Dialog.Root>
      ))}
    </div>
  )
}

Controlled State

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

Brand

import {type ReactElement, useState} from "react"

import {Button} from "@qualcomm-ui/react/button"
import {Dialog} from "@qualcomm-ui/react/dialog"

export function DialogControlledStateDemo(): ReactElement {
  const [open, setOpen] = useState<boolean>(false)

  return (
    <Dialog.Root onOpenChange={setOpen} open={open}>
      <Dialog.Trigger>
        <Button emphasis="primary" variant="fill">
          Open Dialog
        </Button>
      </Dialog.Trigger>
      <Dialog.FloatingPortal>
        <Dialog.Body>
          <Dialog.Heading>Dialog Title</Dialog.Heading>
          <Dialog.CloseButton />
          <Dialog.Description>Dialog Description</Dialog.Description>
        </Dialog.Body>

        <Dialog.Footer>
          <Dialog.CloseTrigger>
            <Button emphasis="primary" size="sm" variant="fill">
              Confirm
            </Button>
          </Dialog.CloseTrigger>
        </Dialog.Footer>
      </Dialog.FloatingPortal>
    </Dialog.Root>
  )
}

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.

Brand

import type {ReactElement} from "react"

import {Button} from "@qualcomm-ui/react/button"
import {Dialog} from "@qualcomm-ui/react/dialog"
import {LoremIpsum} from "@qualcomm-ui/react-core/lorem-ipsum"

export function DialogOutsideScrollDemo(): ReactElement {
  return (
    <Dialog.Root>
      <Dialog.Trigger>
        <Button emphasis="primary" variant="fill">
          Open Dialog
        </Button>
      </Dialog.Trigger>
      <Dialog.FloatingPortal>
        <Dialog.Body>
          <Dialog.Heading>Dialog Title</Dialog.Heading>
          <Dialog.CloseButton />
          <Dialog.Description>
            <LoremIpsum numParagraphs={20} />
          </Dialog.Description>
        </Dialog.Body>
        <Dialog.Footer>
          <Dialog.CloseTrigger>
            <Button emphasis="primary" size="sm" variant="fill">
              Confirm
            </Button>
          </Dialog.CloseTrigger>
        </Dialog.Footer>
      </Dialog.FloatingPortal>
    </Dialog.Root>
  )
}

Inside Scroll

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

Brand

import type {ReactElement} from "react"

import {Button} from "@qualcomm-ui/react/button"
import {Dialog} from "@qualcomm-ui/react/dialog"
import {LoremIpsum} from "@qualcomm-ui/react-core/lorem-ipsum"

export function DialogInsideScrollDemo(): ReactElement {
  return (
    <Dialog.Root scrollBehavior="inside">
      <Dialog.Trigger>
        <Button emphasis="primary" variant="fill">
          Open Dialog
        </Button>
      </Dialog.Trigger>
      <Dialog.FloatingPortal>
        <Dialog.Body>
          <Dialog.Heading>Dialog Title</Dialog.Heading>
          <Dialog.CloseButton />
          <Dialog.Description>
            <LoremIpsum numParagraphs={20} />
          </Dialog.Description>
        </Dialog.Body>
        <Dialog.Footer>
          <Dialog.CloseTrigger>
            <Button emphasis="primary" size="sm" variant="fill">
              Confirm
            </Button>
          </Dialog.CloseTrigger>
        </Dialog.Footer>
      </Dialog.FloatingPortal>
    </Dialog.Root>
  )
}

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.

Brand

import type {ReactElement} from "react"

import {Trash2} from "lucide-react"

import {Button} from "@qualcomm-ui/react/button"
import {Dialog} from "@qualcomm-ui/react/dialog"

export function DialogAlertDialogDemo(): ReactElement {
  return (
    <Dialog.Root emphasis="danger" role="alertdialog">
      <Dialog.Trigger>
        <Button emphasis="danger" endIcon={Trash2} variant="outline">
          Delete Account
        </Button>
      </Dialog.Trigger>
      <Dialog.FloatingPortal>
        <Dialog.Body>
          <Dialog.IndicatorIcon />
          <Dialog.Heading>Are you sure?</Dialog.Heading>
          <Dialog.CloseButton />
          <Dialog.Description>
            This action cannot be undone. This will permanently delete your
            account and remove your data from our systems.
          </Dialog.Description>
        </Dialog.Body>

        <Dialog.Footer>
          <Dialog.CloseTrigger>
            <Button emphasis="neutral" size="sm" variant="outline">
              Cancel
            </Button>
          </Dialog.CloseTrigger>

          <Button emphasis="danger" size="sm" variant="fill">
            Confirm
          </Button>
        </Dialog.Footer>
      </Dialog.FloatingPortal>
    </Dialog.Root>
  )
}

Shortcuts

<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>

API

<Dialog.Root>

Groups all parts of the dialog. Doesn't render its own HTML element.

Prop	Type	Default
children ^* React children prop.	ReactNode
aria-label Human readable label for the dialog, used when the dialog title is not rendered	string
closeOnEscape Whether to close the dialog when the escape key is pressed	boolean	true
closeOnInteractOutside Whether to close the dialog when the outside is clicked	boolean	true
defaultOpen The initial open state of the dialog when rendered. Use when you don't need to control the open state of the dialog.	boolean	false
dir The document's text/writing direction.	'ltr' \| 'rtl'	'ltr'
emphasis The style variant of the dialog's indicator.	\| 'info' \| 'success' \| 'warning' \| 'danger' \| 'neutral'	'neutral'
finalFocusEl Element to receive focus when the dialog is closed	() => HTMLElement
getRootNode A root node to correctly resolve document in custom environments. i.e., Iframes, Electron.	() => \| Node \| ShadowRoot \| Document
immediate Whether to synchronize the present change immediately or defer it to the next frame	boolean
initialFocusEl Element to receive focus when the dialog is opened	() => HTMLElement
lazyMount When true, the component will not be rendered in the DOM until it becomes visible or active.	boolean	false
modal Whether to prevent pointer interaction outside the element and hide all content below it	boolean	true
onEscapeKeyDown Function called when the escape key is pressed	( event: KeyboardEvent, ) => void
onExitComplete Function called when the animation ends in the closed state	VoidFunction
onFocusOutside Function called when the focus is moved outside the component	( event: FocusOutsideEvent, ) => void
onInteractOutside Function called when an interaction happens outside the component	( event: InteractOutsideEvent, ) => void
onOpenChange Function invoked when the dialog opens or closes open:The next value of the open state.	( open: boolean, ) => void
onPointerDownOutside Function called when the pointer is pressed down outside the component	( event: PointerDownOutsideEvent, ) => void
onRequestDismiss Function called when this layer is closed due to a parent layer being closed	( event: CustomEvent<{ originalIndex: number originalLayer: HTMLElement targetIndex: number targetLayer: HTMLElement }>, ) => void
open The controlled open state of the dialog	boolean
persistentElements Returns the persistent elements that: - should not have pointer-events disabled - should not trigger the dismiss event	Array< () => Element >
placement The vertical placement of the dialog within the viewport. `'top'`: The dialog is positioned at the top of the viewport. `'center'`: The dialog is positioned at the center of the viewport. `'bottom'`: The dialog is positioned at the bottom of the viewport.	\| 'top' \| 'center' \| 'bottom'	'top'
present Whether the node is present (controlled by the user)	boolean
preventScroll Whether to prevent scrolling behind the dialog when it's opened	boolean	true
restoreFocus Whether to restore focus to the element that had focus before the dialog was opened	boolean	true
role The dialog's role	\| 'dialog' \| 'alertdialog'	'dialog'
scrollBehavior Defines the scroll behavior of the dialog content when modal content exceeds viewport height. `'inside'`: The modal and backdrop create an internal scroll area within the modal. `'outside'`: The modal and backdrop move with the page scroll instead of creating an internal scroll area within the modal.	\| 'inside' \| 'outside'	'outside'
size The size of the dialog's content area and fonts. A smaller size uses less horizontal space.	'sm' \| 'md'	'sm'
skipAnimationOnMount Whether to allow the initial presence animation.	boolean	false
trapFocus Whether to trap focus inside the dialog when it's opened	boolean	true
unmountOnExit When true, the component will be completely removed from the DOM when it becomes inactive or hidden, rather than just being hidden with CSS.	boolean	false

children

Type

ReactNode

Description

React children prop.

aria-label

Type

string

Description

Human readable label for the dialog, used when the dialog title is not rendered

closeOnEscape

Type

boolean

Description

Whether to close the dialog when the escape key is pressed

closeOnInteractOutside

Type

boolean

Description

Whether to close the dialog when the outside is clicked

defaultOpen

Type

boolean

Description

The initial open state of the dialog when rendered. Use when you don't need to control the open state of the dialog.

dir

Type

'ltr' | 'rtl'

Description

The document's text/writing direction.

emphasis

Type

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

Description

The style variant of the dialog's indicator.

finalFocusEl

Type

() => HTMLElement

Description

Element to receive focus when the dialog is closed

getRootNode

Type

() =>
| Node
| ShadowRoot
| Document

Description

A root node to correctly resolve document in custom environments. i.e., Iframes, Electron.

immediate

Type

boolean

Description

Whether to synchronize the present change immediately or defer it to the next frame

initialFocusEl

Type

() => HTMLElement

Description

Element to receive focus when the dialog is opened

lazyMount

Type

boolean

Description

When true, the component will not be rendered in the DOM until it becomes visible or active.

modal

Type

boolean

Description

Whether to prevent pointer interaction outside the element and hide all content below it

onEscapeKeyDown

Type

(
  event: KeyboardEvent,
) => void

Description

Function called when the escape key is pressed

onExitComplete

Type

VoidFunction

Description

Function called when the animation ends in the closed state

onFocusOutside

Type

(
  event: FocusOutsideEvent,
) => void

Description

Function called when the focus is moved outside the component

onInteractOutside

Type

(
  event: InteractOutsideEvent,
) => void

Description

Function called when an interaction happens outside the component

onOpenChange

Type

(
  open: boolean,
) => void

Description

Function invoked when the dialog opens or closes

open:The next value of the open state.

onPointerDownOutside

Type

(
  event: PointerDownOutsideEvent,
) => void

Description

Function called when the pointer is pressed down outside the component

onRequestDismiss

Type

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

Description

Function called when this layer is closed due to a parent layer being closed

open

Type

boolean

Description

The controlled open state of the dialog

persistentElements

Type

Array<
  () => Element
>

Description

Returns the persistent elements that:
- should not have pointer-events disabled
- should not trigger the dismiss event

placement

Type

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

Description

The vertical placement of the dialog within the viewport.

'top': The dialog is positioned at the top of the viewport.
'center': The dialog is positioned at the center of the viewport.
'bottom': The dialog is positioned at the bottom of the viewport.

present

Type

boolean

Description

Whether the node is present (controlled by the user)

preventScroll

Type

boolean

Description

Whether to prevent scrolling behind the dialog when it's opened

restoreFocus

Type

boolean

Description

Whether to restore focus to the element that had focus before the dialog was opened

role

Type

| 'dialog'
| 'alertdialog'

Description

The dialog's role

scrollBehavior

Type

| 'inside'
| 'outside'

Description

Defines the scroll behavior of the dialog content when modal content exceeds viewport height.

'inside': The modal and backdrop create an internal scroll area within the modal.
'outside': The modal and backdrop move with the page scroll instead of creating an internal scroll area within the modal.

size

Type

'sm' | 'md'

Description

The size of the dialog's content area and fonts. A smaller size uses less horizontal space.

skipAnimationOnMount

Type

boolean

Description

Whether to allow the initial presence animation.

trapFocus

Type

boolean

Description

Whether to trap focus inside the dialog when it's opened

unmountOnExit

Type

boolean

Description

When true, the component will be completely removed from the DOM when it becomes inactive or hidden, rather than just being hidden with CSS.

<Dialog.Backdrop>

An overlay displayed beneath the dialog to prevent interaction with the rest of the page. Renders a <div> element by default.

Prop	Type
children React children prop.	ReactNode
id id attribute. If omitted, a unique identifier will be automatically generated for accessibility.	string
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

Type

string

Description

id attribute. If omitted, a unique identifier will be automatically generated for accessibility.

render

Type

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

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Attribute / Property	Value
`className`	'qui-dialog__backdrop'
`data-part`	'backdrop'
`data-scope`	'dialog'
`data-state`	\| 'open' \| 'closed'
`hidden`	boolean

className

Value

'qui-dialog__backdrop'

data-part

Value

'backdrop'

data-scope

Value

'dialog'

data-state

Value

| 'open'
| 'closed'

hidden

Value

boolean

<Dialog.Positioner>

A container that positions the dialog on the screen. Renders a <div> element by default.

Prop	Type
children React children prop.	ReactNode
id id attribute. If omitted, a unique identifier will be automatically generated for accessibility.	string
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

Type

string

Description

id attribute. If omitted, a unique identifier will be automatically generated for accessibility.

render

Type

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

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Attribute / Property	Value
`className`	'qui-dialog__positioner'
`data-placement`	\| 'top' \| 'center' \| 'bottom'
`data-scroll-behavior`	\| 'inside' \| 'outside'
`data-size`	'sm' \| 'md'

className

Value

'qui-dialog__positioner'

data-placement

Value

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

data-scroll-behavior

Value

| 'inside'
| 'outside'

data-size

Value

'sm' | 'md'

<Dialog.Content>

A container for the dialog contents. Renders a <section> element by default.

Prop	Type
children React children prop.	ReactNode
id id attribute. If omitted, a unique identifier will be automatically generated for accessibility.	string
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

Type

string

Description

id attribute. If omitted, a unique identifier will be automatically generated for accessibility.

render

Type

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

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Attribute / Property	Value
`className`	'qui-dialog__content'
`data-part`	'content'
`data-scope`	'dialog'
`data-scroll-behavior`	\| 'inside' \| 'outside'
`data-size`	'sm' \| 'md'
`data-state`	\| 'open' \| 'closed'
`hidden`	boolean
`tabIndex`	-1

className

Value

'qui-dialog__content'

data-part

Value

'content'

data-scope

Value

'dialog'

data-scroll-behavior

Value

| 'inside'
| 'outside'

data-size

Value

'sm' | 'md'

data-state

Value

| 'open'
| 'closed'

hidden

Value

boolean

tabIndex

Value

-1

<Dialog.Body>

The main content of the dialog. Container for the heading, description, indicator, and primary content of the dialog. Renders a <div> element by default.

Prop	Type
children React children prop.	ReactNode
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

render

Type

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

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Attribute / Property	Value
`className`	'qui-dialog__body'
`data-part`	'body'
`data-scope`	'dialog'
`data-size`	'sm' \| 'md'

className

Value

'qui-dialog__body'

data-part

Value

'body'

data-scope

Value

'dialog'

data-size

Value

'sm' | 'md'

<Dialog.Heading>

A heading that labels the dialog. Renders an <h2> element by default.

Prop	Type
children React children prop.	ReactNode
id id attribute. If omitted, a unique identifier will be automatically generated for accessibility.	string
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

Type

string

Description

id attribute. If omitted, a unique identifier will be automatically generated for accessibility.

render

Type

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

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Attribute / Property	Value
`className`	'qui-dialog__heading'
`data-part`	'heading'
`data-scope`	'dialog'
`data-size`	'sm' \| 'md'

className

Value

'qui-dialog__heading'

data-part

Value

'heading'

data-scope

Value

'dialog'

data-size

Value

'sm' | 'md'

Content that appears at the bottom of the dialog, typically reserved for actions. Renders a <div> element by default.

Prop	Type
children React children prop.	ReactNode
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

render

Type

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

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Attribute / Property	Value
`className`	'qui-dialog__footer'
`data-part`	'footer'
`data-scope`	'dialog'
`data-size`	'sm' \| 'md'

className

Value

'qui-dialog__footer'

data-part

Value

'footer'

data-scope

Value

'dialog'

data-size

Value

'sm' | 'md'

<Dialog.IndicatorIcon>

An icon that indicates the dialog's status. Renders a <span> element by default.

Prop	Type
icon Lucide-react icon or React Element. If this prop is omitted, a fallback icon will be rendered based on the emphasis prop.	\| LucideIcon \| ReactNode
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

icon

Type

| LucideIcon
| ReactNode

Description

Lucide-react icon or React Element. If this prop is omitted, a fallback icon will be rendered based on the emphasis prop.

render

Type

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

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Attribute / Property	Value
`className`	'qui-dialog__indicator-icon'
`data-emphasis`	\| 'info' \| 'success' \| 'warning' \| 'danger' \| 'neutral'
`data-size`	'sm' \| 'md'

className

Value

'qui-dialog__indicator-icon'

data-emphasis

Value

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

data-size

Value

'sm' | 'md'

<Dialog.CloseButton>

A button that closes the dialog. Renders a <button> element by default.

Prop	Type	Default
icon	LucideIcon	X
id id attribute. If omitted, a unique identifier will be automatically generated for accessibility.	string
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

icon

Type

LucideIcon

Description

Type

string

Description

id attribute. If omitted, a unique identifier will be automatically generated for accessibility.

render

Type

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

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Attribute / Property	Value
`className`	'qui-dialog__close-button'
`data-part`	'close-trigger'
`data-scope`	'dialog'

Tag

Drawer