Disclosure

An interactive component which expands/collapses content.

Features

• Supports modal and non-modal modes
• Customizable focus management
• Waits for pending animations before removing the dialog from the DOM
• Pressing the escape key and interacting outside closes the dialog
• Supports nested dialogs

Usage

import Dialog from 'corvu/dialog'
// Or
// import { Root, Trigger, ... } from 'corvu/dialog'

Anatomy

<Dialog.Root>
  <Dialog.Trigger />
  <Dialog.Portal>
    <Dialog.Overlay />
    <Dialog.Content>
      <Dialog.Close />
      <Dialog.Label />
      <Dialog.Description />
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>

Scrolling

By default, corvu prevents scrolling of elements outside of the dialog content while the dialog open. It will also add additional padding to the body to prevent the page from jumping when the scrollbar disappears. There is also a CSS variable called --scrollbar-width which is present when the scrollbar is hidden. You can use this to prevent any fixed element from jumping:

<header
  class="fixed top-0 inset-x-0 z-50"
  style={{
    'padding-right': 'var(--scrollbar-width, 0)',
  }}
>
  Header
</header>

Accessibility

Adheres to the Disclosure WAI-ARIA design pattern.

API reference