Dialog

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

Anatomy

Import all parts and create your own Dialog.

import { Dialog } from '@micode-ui/react';
 
<Dialog.Root>
  <Dialog.Trigger />
  <Dialog.Content>
    <Dialog.Title />
    <Dialog.Description />
  </Dialog.Content>
</Dialog.Root>

Example

<Surface>
  <Dialog.Root>
    <Dialog.Trigger>
      <Button>Open Dialog</Button>
    </Dialog.Trigger>
    <Dialog.Content>
      <Dialog.Title>Lorem Ipsum dolor</Dialog.Title>
      <Dialog.Description>
        Lorem ipsum dolor sit amet scelerisque in dictum non consectetur a
        erat nam at lectus urna duis convallis convallis tellus
      </Dialog.Description>
    </Dialog.Content>
  </Dialog.Root>
</Surface>

API Reference

Root

Contains all the parts of a dialog.

Prop	Type	Default
`defaultOpen`	`boolean`	No default value
`open`	`boolean`	No default value
`onOpenChange`	`function`	No default value
`modal`	`boolean`	`true`
`id`	`string`	No default value

Trigger

The button that opens the dialog.

Prop	Type	Default
`children`	`ReactNode`	No default value

Content

Contains content to be rendered in the open dialog.

Prop	Type	Default
`asChild`	`boolean`	`false`
`forceMount`	`boolean`	No default value
`onOpenAutoFocus`	`function`	No default value
`onCloseAutoFocus`	`function`	No default value
`onEscapeKeyDown`	`function`	No default value
`onPointerDownOutside`	`function`	No default value
`onInteractOutside`	`function`	No default value

Title

An accessible title to be announced when the dialog is opened.

If you want to hide the title, wrap it inside our Visually Hidden utility like this <VisuallyHidden asChild>.

Prop	Type	Default
`asChild`	`boolean`	`false`

Description

An optional accessible description to be announced when the dialog is opened.

If you want to hide the description, wrap it inside our Visually Hidden utility like this <VisuallyHidden asChild>. If you want to remove the description entirely, remove this part and pass aria-describedby={undefined} to Dialog.Content.

Prop	Type	Default
`asChild`	`boolean`	`false`

Checkbox Icon Button