Docs
Dialog

Dialog

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

Radix UIAPI Reference

Usage

import { Dialog } from '@bit/ui'
<Dialog.Root>
  <Dialog.Trigger>Open</Dialog.Trigger>
  <Dialog.Content>
    <Dialog.Header>
      <Dialog.Title>Are you sure absolutely sure?</Dialog.Title>
      <Dialog.Description>
        This action cannot be undone. This will permanently delete your account and remove your data
        from our servers.
      </Dialog.Description>
    </Dialog.Header>
  </Dialog.Content>
</Dialog.Root>

Notes

To activate the Dialog component from within a Context Menu or Dropdown Menu, you must encase the Context Menu or Dropdown Menu component in the Dialog component. For more information, refer to the linked issue here.

<Dialog.Root>
  <ContextMenu.Root>
    <ContextMenu.Trigger>Right click</ContextMenu.Trigger>
    <ContextMenu.Content>
      <ContextMenu.Item>Open</ContextMenu.Item>
      <ContextMenu.Item>Download</ContextMenu.Item>
      <Dialog.Trigger asChild>
        <ContextMenu.Item>
          <span>Delete</span>
        </ContextMenu.Item>
      </Dialog.Trigger>
    </ContextMenu.Content>
  </ContextMenu.Root>
  <Dialog.Content>
    <Dialog.Header>
      <Dialog.Title>Are you sure absolutely sure?</Dialog.Title>
      <Dialog.Description>
        This action cannot be undone. Are you sure you want to permanently delete this file from our
        servers?
      </Dialog.Description>
    </Dialog.Header>
    <Dialog.Footer>
      <Button type='submit'>Confirm</Button>
    </Dialog.Footer>
  </Dialog.Content>
</Dialog.Root>
DatePickerDropdown Menu