Dialog

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

Usage

import { Dialog } from '@raystack/apsara'

Dialog Props

Prop	Type	Default
`open`	`boolean`	-
`onOpenChange`	`((open: boolean) => void)`	-
`modal`	`boolean`	`true`

Dialog.Content Props

Prop	Type	Default
`width`	`string \| number`	-
`overlayBlur`	`boolean`	-
`overlayClassName`	`string`	-
`overlayStyle`	`CSSProperties`	-
`className`	`string`	-
`side`	`"top" \| "right" \| "bottom" \| "left"`	-
`ariaLabel`	`string`	-
`ariaDescription`	`string`	-

Dialog.Header Props

Prop	Type	Default
`className`	`string`	-
`children`	`ReactNode`	-

Dialog.Title Props

Prop	Type	Default
`className`	`string`	-
`children`	`ReactNode`	-

Dialog.Body Props

Prop	Type	Default
`className`	`string`	-
`children`	`ReactNode`	-

Dialog.Description Props

Prop	Type	Default
`className`	`string`	-

Dialog.Trigger Props

Prop	Type	Default
`asChild`	`boolean`	-
`className`	`string`	-

Dialog.CloseButton Props

Prop	Type	Default
`asChild`	`boolean`	-
`className`	`string`	-

Dialog.Footer Props

Prop	Type	Default
`className`	`string`	-
`children`	`ReactNode`	-

Examples

Controlled Dialog

Example of a controlled dialog with custom state management.

(function ControlledDialog() {
  const [open, setOpen] = React.useState(false);
 
  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <Dialog.Trigger asChild>
        <Button>Controlled Dialog</Button>
      </Dialog.Trigger>
      <Dialog.Content width={600}>
        <Dialog.Body>
          <Dialog.Title>Controlled State</Dialog.Title>
          <Dialog.Description>
            This dialog's state is controlled externally.
          </Dialog.Description>
        </Dialog.Body>
      </Dialog.Content>
    </Dialog>
  );
})

Custom Width and Overlay

Example with custom width and overlay styling.

<Dialog>
  <Dialog.Trigger asChild>
    <Button>Styled Dialog</Button>
  </Dialog.Trigger>
  <Dialog.Content
    width="400px"
    overlayBlur
    overlayClassName="custom-overlay"
    overlayStyle={{ backgroundColor: "rgba(0, 0, 0, 0.5)" }}
  >
    <Dialog.Body>
      <Dialog.Title>Custom Styled Dialog</Dialog.Title>
      <Dialog.Description className="custom-description">
        This dialog has custom width and overlay styling.
      </Dialog.Description>
    </Dialog.Body>
  </Dialog.Content>
</Dialog>

With Header and Body

Example with header and body.

<Dialog>
  <Dialog.Trigger asChild>
    <Button>Only Header and Body</Button>
  </Dialog.Trigger>
  <Dialog.Content
    width="400px"
    overlayBlur
    overlayClassName="custom-overlay"
    overlayStyle={{ backgroundColor: "rgba(0, 0, 0, 0.5)" }}
  >
    <Dialog.Header>
      <Dialog.Title>Title</Dialog.Title>
      <Dialog.CloseButton />
    </Dialog.Header>
    <Dialog.Body>
      <Dialog.Description className="custom-description">
        This dialog has custom width and overlay styling.
      </Dialog.Description>
    </Dialog.Body>
  </Dialog.Content>
</Dialog>

With Body and Footer

Example with header and body.

<Dialog>
  <Dialog.Trigger asChild>
    <Button>Only Footer and Body</Button>
  </Dialog.Trigger>
  <Dialog.Content
    width="400px"
    overlayBlur
    overlayClassName="custom-overlay"
    overlayStyle={{ backgroundColor: "rgba(0, 0, 0, 0.5)" }}
  >
    <Dialog.Body>
      <Dialog.Title>Title</Dialog.Title>
      <Dialog.Description className="custom-description">
        This dialog has custom width and overlay styling.
      </Dialog.Description>
    </Dialog.Body>
    <Dialog.Footer>
      <Dialog.Close asChild>
        <Button color="neutral">Close</Button>
      </Dialog.Close>
      <Button color="danger">Cancel</Button>
    </Dialog.Footer>
  </Dialog.Content>
</Dialog>

Accessibility

Dialog has role="dialog" and aria-modal="true"
Uses aria-label or aria-labelledby to identify the dialog
Uses aria-describedby to provide additional context

DialogCopy Markdown

On this page

Dialog