Skip to content
Borneo Design System

Dialog

Stable

A modal surface that interrupts the task to ask for something. Dialogs take over focus and make the page behind inert, so they are reserved for moments that genuinely cannot continue without an answer.

Added in v1.2.0 · import from "@borneo/react"

Interactive previewPermalink to this section

Open the dialog and press Tab repeatedly — focus cycles inside the panel and never reaches the page behind.

Size
Close button
dialog-preview.tsx
<Dialog>
  <DialogTrigger asChild>
    <Button variant="secondary">Open dialog</Button>
  </DialogTrigger>

  <DialogContent size="md">
    <DialogHeader>
      <DialogTitle>Invite a teammate</DialogTitle>
      <DialogDescription>
        They will get access to every project in this workspace.
      </DialogDescription>
    </DialogHeader>

    <DialogFooter>
      <DialogClose asChild>
        <Button variant="ghost">Cancel</Button>
      </DialogClose>
      <Button>Send invitation</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

AnatomyPermalink to this section

Invite a teammateThey will get access to every project.

SizesPermalink to this section

Small for confirmations, medium for a short form, large only when the content genuinely needs the width.

sm — 384px

Confirmations

md — 512px

Short forms

lg — 672px

Dense content

Destructive confirmationPermalink to this section

The title names the object, the description names the consequence, and the confirming button repeats the verb rather than saying “OK”.

Related components