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 asChild>
7        <Button>Controlled Dialog</Button>
8      </Dialog.Trigger>
9      <Dialog.Content width={600}>
10        <Dialog.Body>
11          <Dialog.Title>Controlled State</Dialog.Title>
12          <Dialog.Description>
13            This dialog's state is controlled externally.
14          </Dialog.Description>
15        </Dialog.Body>
16      </Dialog.Content>
17    </Dialog>
18  );
19})

Custom Width and Overlay

Example with custom width and overlay styling.

1<Dialog>
2  <Dialog.Trigger asChild>
3    <Button>Styled Dialog</Button>
4  </Dialog.Trigger>
5  <Dialog.Content
6    width="400px"
7    overlayBlur
8    overlayClassName="custom-overlay"
9    overlayStyle={{ backgroundColor: "rgba(0, 0, 0, 0.5)" }}
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>
16    </Dialog.Body>
17  </Dialog.Content>
18</Dialog>

With Header and Body

Example with header and body.

1<Dialog>
2  <Dialog.Trigger asChild>
3    <Button>Only Header and Body</Button>
4  </Dialog.Trigger>
5  <Dialog.Content
6    width="400px"
7    overlayBlur
8    overlayClassName="custom-overlay"
9    overlayStyle={{ backgroundColor: "rgba(0, 0, 0, 0.5)" }}
10  >
11    <Dialog.Header>
12      <Dialog.Title>Title</Dialog.Title>
13      <Dialog.CloseButton />
14    </Dialog.Header>
15    <Dialog.Body>
16      <Dialog.Description className="custom-description">
17        This dialog has custom width and overlay styling.
18      </Dialog.Description>
19    </Dialog.Body>
20  </Dialog.Content>
21</Dialog>

With Body and Footer

Example with header and body.

1<Dialog>
2  <Dialog.Trigger asChild>
3    <Button>Only Footer and Body</Button>
4  </Dialog.Trigger>
5  <Dialog.Content
6    width="400px"
7    overlayBlur
8    overlayClassName="custom-overlay"
9    overlayStyle={{ backgroundColor: "rgba(0, 0, 0, 0.5)" }}
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>
16    </Dialog.Body>
17    <Dialog.Footer>
18      <Dialog.Close asChild>
19        <Button color="neutral">Close</Button>
20      </Dialog.Close>
21      <Button color="danger">Cancel</Button>
22    </Dialog.Footer>
23  </Dialog.Content>
24</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