Dialog

A modal dialog that interrupts the user with important content and expects a response.

Import

import { Dialog } from '@chimera-ui/components'

Usage

<Dialog.Root>
  <Dialog.Trigger asChild>
    <Button variant="secondary">
      <p>
        Edit profile
      </p>
    </Button>
  </Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Overlay />
    <Dialog.Content>
      <Dialog.Title>
        Edit profile
      </Dialog.Title>
      <Dialog.Description>
        <p>
          Make changes to your profile here. Click save when you're done.
        </p>
      </Dialog.Description>
      <fieldset>
        <label
          className="text-overlay-content"
          htmlFor="name"
        >
          <p>
            Name
          </p>
        </label>
        <Input
          defaultValue="Pedro Duarte"
          id="name"
        />
      </fieldset>
      <fieldset>
        <label
          className="text-overlay-content"
          htmlFor="username"
        >
          <p>
            Username
          </p>
        </label>
        <Input
          defaultValue="@peduarte"
          id="username"
        />
      </fieldset>
      <Dialog.Close />
      <Dialog.Confirm />
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>

Extending Radix Anatomy

Dialog.Confirm

Chimera adds Dialog.Confirm, which is a Dialog.Close, except it positions a button in the bottom right corner. You can pass children to it, or use <Dialog.Confirm /> to use the default button.

Copy Dropdown Menu