Overlays & Tooltips

Dialog

Modal dialog with header and footer.

Import

tsx

import { Dialog } from "@cronus-ui/ui";

bash

npx cronus-ui add dialog

Examples

Basic

A modal dialog with a header, body, and footer rendered in a portal.

tsx

<Dialog>
  <DialogTrigger asChild>
    <Button>Edit profile</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Edit profile</DialogTitle>
      <DialogDescription>
        Update your display name. Changes are saved when you confirm.
      </DialogDescription>
    </DialogHeader>
    <div className="flex flex-col gap-4 py-2">
      <div className="flex flex-col gap-2">
        <Label htmlFor="name">Name</Label>
        <Input id="name" defaultValue="Ada Lovelace" />
      </div>
      <div className="flex flex-col gap-2">
        <Label htmlFor="username">Username</Label>
        <Input id="username" defaultValue="ada" />
      </div>
    </div>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="outline">Cancel</Button>
      </DialogClose>
      <DialogClose asChild>
        <Button>Save changes</Button>
      </DialogClose>
    </DialogFooter>
  </DialogContent>
</Dialog>

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component DialogDefault layout:inline style:dialog {
  description:"Update your display name."
  label "Edit profile"
  text "Save changes"
}

page "/audit/dialog/default" type:custom {
  use DialogDefault
}

API Reference

Generated from the component's exported types.

DialogContentProps

Extends ComponentPropsWithoutRef<typeof DialogPrimitive.Content>

Prop	Type	Default	Description
`showCloseButton`	`boolean`	`true`	Render the built-in top-right close button. Set `false` when the content supplies its own close affordance (e.g. a full-bleed gallery header).
`labels`	`{ close?: string }`	—	Override the built-in close button's accessible name. Defaults to `"Close"`.
`forceMount`	`boolean`	—	Keep the node mounted when closed, for exit animation.
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

DialogProps

Extends ComponentProps<typeof DialogPrimitive.Root>

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state.
`defaultOpen`	`boolean`	—	Uncontrolled initial open state.
`onOpenChange`	`(open: boolean) => void`	—	Called when the open state changes.
`children`	`ReactNode`	—	Contents of the component.
`modal`	`boolean`	—	When true, interaction outside the surface is blocked.

DialogTriggerProps

Extends ComponentProps<typeof DialogPrimitive.Trigger>

Prop	Type	Default	Description
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

DialogPortalProps

Extends ComponentProps<typeof DialogPrimitive.Portal>

Prop	Type	Default	Description
`forceMount`	`boolean`	—	Keep the node mounted when closed, for exit animation.
`container`	`HTMLElement`	—	Portal mount node.

DialogCloseProps

Extends ComponentProps<typeof DialogPrimitive.Close>

Prop	Type	Default	Description
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

DialogOverlayProps

Extends ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>

Prop	Type	Default	Description
`forceMount`	`boolean`	—	Keep the node mounted when closed, for exit animation.
`asChild`	`boolean`	—	Render as the child element via Slot.
`className`	`string`	—	Additional class names merged onto the root.

DialogHeaderProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

DialogFooterProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

DialogTitleProps

Extends ComponentPropsWithoutRef<typeof DialogPrimitive.Title>

Prop	Type	Default	Description
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

DialogDescriptionProps

Extends ComponentPropsWithoutRef<typeof DialogPrimitive.Description>

Prop	Type	Default	Description
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.