Skip to content

index.mdx

Latest commit

 

History

History
126 lines (74 loc) · 2.72 KB

index.mdx

File metadata and controls

126 lines (74 loc) · 2.72 KB
title Dialog
description A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
source packages/raystack/components/dialog

import { playground, closeDemo, customDemo, controlledDemo, onlyHeaderDemo, onlyFooterDemo, nestedDemo } from "./demo.ts";

Anatomy

Import and assemble the component:

import { Dialog } from '@raystack/apsara'

<Dialog>
  <Dialog.Trigger />
  <Dialog.Content>
    <Dialog.Header>
      <Dialog.Title />
      <Dialog.CloseButton />
    </Dialog.Header>
    <Dialog.Body>
      <Dialog.Description />
    </Dialog.Body>
    <Dialog.Footer />
  </Dialog.Content>
</Dialog>

API Reference

Root

Groups all parts of the dialog.

Content

Renders the dialog panel overlay.

Header

Renders the dialog header section.

Title

Renders the dialog title text.

Body

Renders the main content area of the dialog.

Description

Renders supplementary text within the dialog body.

Trigger

Renders the element that opens the dialog.

CloseButton

Renders a button that closes the dialog.

Footer

Renders the dialog footer section.

Examples

Controlled Dialog

Example of a controlled dialog with custom state management.

Custom Width and Overlay

Example with custom width and overlay styling.

With Header and Body

Example with header and body.

With Body and Footer

Example with header and body.

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.

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
  • Respects motion preferences: dialog panel motion is enabled only when prefers-reduced-motion: no-preference