Dialog

A modal surface for focused tasks.

Installation

import { Dialog } from "~/components/ui/Dialog";

<Dialog
  trigger={<Button>Create a worker</Button>}
  title="Create a worker"
  description="Spin up a new edge worker."
>
  <p>...</p>
</Dialog>

Prop	Type	Default	Description
trigger	ReactElement	-	Element that opens the dialog (props are merged in).
title	ReactNode	-	Dialog title (announced to screen readers).
description	ReactNode	-	Optional supporting text.
children	ReactNode	-	Dialog body content.

Built on the Base UI Dialog primitive: focus is trapped, the backdrop is inert, and Escape closes.
Title and description are wired to aria-labelledby / aria-describedby automatically.