Dialog

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

Usage

1import { Dialog } from '@raystack/apsara'

Dialog Props

Prop

Type

Dialog.Content Props

Prop

Type

Dialog.Header Props

Prop

Type

Dialog.Title Props

Prop

Type

Dialog.Body Props

Prop

Type

Dialog.Description Props

Prop

Type

Dialog.Trigger Props

Prop

Type

Dialog.CloseButton Props

Prop

Type

Dialog.Footer Props

Prop

Type

Examples

Controlled Dialog

Example of a controlled dialog with custom state management.

1(function ControlledDialog() {
2  const [open, setOpen] = React.useState(false);
3

4  return (
5    <Dialog open={open} onOpenChange={setOpen}>
6      <Dialog.Trigger render={<Button />}>Controlled Dialog</Dialog.Trigger>
7      <Dialog.Content width={600}>
8        <Dialog.Body>
9          <Dialog.Title>Controlled State</Dialog.Title>
10          <Dialog.Description>
11            This dialog's state is controlled externally.
12          </Dialog.Description>
13        </Dialog.Body>
14      </Dialog.Content>
15    </Dialog>

Custom Width and Overlay

Example with custom width and overlay styling.

1<Dialog>
2  <Dialog.Trigger render={<Button />}>Styled Dialog</Dialog.Trigger>
3  <Dialog.Content
4    width="400px"
5    overlay={{
6      blur: true,
7      className: "custom-overlay",
8      style: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
9    }}
10  >
11    <Dialog.Body>
12      <Dialog.Title>Custom Styled Dialog</Dialog.Title>
13      <Dialog.Description className="custom-description">
14        This dialog has custom width and overlay styling.
15      </Dialog.Description>

With Header and Body

Example with header and body.

1<Dialog>
2  <Dialog.Trigger render={<Button />}>Only Header and Body</Dialog.Trigger>
3  <Dialog.Content
4    width="400px"
5    overlay={{
6      blur: true,
7      className: "custom-overlay",
8      style: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
9    }}
10  >
11    <Dialog.Header>
12      <Dialog.Title>Title</Dialog.Title>
13    </Dialog.Header>
14    <Dialog.Body>
15      <Dialog.Description className="custom-description">

With Body and Footer

Example with header and body.

1<Dialog>
2  <Dialog.Trigger render={<Button />}>Only Footer and Body</Dialog.Trigger>
3  <Dialog.Content
4    width="400px"
5    overlay={{
6      blur: true,
7      className: "custom-overlay",
8      style: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
9    }}
10  >
11    <Dialog.Body>
12      <Dialog.Title>Title</Dialog.Title>
13      <Dialog.Description className="custom-description">
14        This dialog has custom width and overlay styling.
15      </Dialog.Description>

Nested Dialogs

You can nest dialogs within one another. When a nested dialog opens, the parent dialog automatically scales down and becomes slightly transparent. The nested dialog's backdrop won't be rendered, allowing you to see the parent dialog behind it.

1(function NestedDialogExample() {
2  const [parentOpen, setParentOpen] = React.useState(false);
3  const [nestedOpen, setNestedOpen] = React.useState(false);
4

5  return (
6    <>
7      <Dialog open={parentOpen} onOpenChange={setParentOpen}>
8        <Dialog.Trigger render={<Button />}>Open Parent Dialog</Dialog.Trigger>
9        <Dialog.Content width={400}>
10          <Dialog.Header>
11            <Dialog.Title>Parent Dialog</Dialog.Title>
12          </Dialog.Header>
13          <Dialog.Body>
14            <Dialog.Description>
15              This is the parent dialog. Click the button below to open a nested

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