V2 componentsUpdated Oct 15, 2026

Dialog

A modal window laid over the page, for a decision or a short task that needs the user before anything else happens. Content bundles the portal, backdrop, popup, and close button; Header, Body, and Footer lay out the inside at the standard spacing, so a plain Header (Title, Description), Body, Footer composition needs no classes. Trigger and Close are Buttons, so they take the same variants. The popup focuses itself on open so the title is read first; mark the field of a dialog that exists to be typed into with data-autofocus. Its height eases when the content changes, except under reduced motion. For a confirmation, see Danger confirm. An outside click or Escape dismisses every dialog.

Import

Source: packages/ui/src/components/dialog

tsx

1import { Dialog } from '@highlight/ui'

Playground

Change the props; the preview and the snippet update together.

Props

Title

Description

Trigger variant

Trigger tone

Confirm variant

Confirm tone

Show close

Disable escape

Body

tsx

1<Dialog>2  <Dialog.Trigger tone="danger">Open dialog</Dialog.Trigger>3  <Dialog.Content>4    <Dialog.Header>5      <Dialog.Title>Delete this thread?</Dialog.Title>6      <Dialog.Description>Messages and attachments are removed for everyone.</Dialog.Description>7    </Dialog.Header>8    <Dialog.Footer>9      <Dialog.Close variant="outline">Cancel</Dialog.Close>10      <Dialog.Close tone="danger">Confirm</Dialog.Close>11    </Dialog.Footer>12  </Dialog.Content>13</Dialog>

Basic

tsx

1import { Dialog } from '@highlight/ui'2 3export default function DialogBasic() {4  return (5    <Dialog>6      <Dialog.Trigger>View notifications</Dialog.Trigger>7      <Dialog.Content showClose={false}>8        <Dialog.Header>9          <Dialog.Title>Notifications</Dialog.Title>10          <Dialog.Description>You are all caught up.</Dialog.Description>11        </Dialog.Header>12        <Dialog.Body>13          <p className="text-foreground-secondary text-sm">14            Every notification has been reviewed. New ones will appear here.15          </p>16        </Dialog.Body>17        <Dialog.Footer>18          <Dialog.Close variant="primary">Done</Dialog.Close>19        </Dialog.Footer>20      </Dialog.Content>21    </Dialog>22  )23}

With icon

Dialog.Icon goes first inside Header, a tile that says what the dialog is about.

tsx

1import { CalendarCheck } from 'lucide-react'2import { Dialog } from '@highlight/ui'3 4export default function DialogWithIcon() {5  return (6    <Dialog>7      <Dialog.Trigger>Connect calendar</Dialog.Trigger>8      <Dialog.Content showClose={false}>9        <Dialog.Header>10          <Dialog.Icon>11            <CalendarCheck />12          </Dialog.Icon>13          <Dialog.Title>Connect your calendar</Dialog.Title>14          <Dialog.Description>15            Highlight joins the meetings on it and prepares notes before they start.16          </Dialog.Description>17        </Dialog.Header>18        <Dialog.Footer>19          <Dialog.Close variant="outline">Not now</Dialog.Close>20          <Dialog.Close variant="primary">Connect</Dialog.Close>21        </Dialog.Footer>22      </Dialog.Content>23    </Dialog>24  )25}

Danger confirm

The confirm pattern now that AlertDialog is gone: Icon tone="danger", a title and description, Cancel as outline, and a primary danger Button naming the action ("Delete", not "OK"). Like any dialog, an outside click or Escape cancels it.

tsx

1import { Trash2 } from 'lucide-react'2import { Dialog } from '@highlight/ui'3 4export default function DialogDangerConfirm() {5  return (6    <Dialog>7      <Dialog.Trigger variant="primary" tone="danger">8        Delete thread9      </Dialog.Trigger>10      <Dialog.Content showClose={false}>11        <Dialog.Header>12          <Dialog.Icon tone="danger">13            <Trash2 />14          </Dialog.Icon>15          <Dialog.Title>Delete this thread?</Dialog.Title>16          <Dialog.Description>17            Messages and attachments are removed for everyone. This cannot be undone.18          </Dialog.Description>19        </Dialog.Header>20        <Dialog.Footer>21          <Dialog.Close variant="outline">Cancel</Dialog.Close>22          <Dialog.Close variant="primary" tone="danger">23            Delete24          </Dialog.Close>25        </Dialog.Footer>26      </Dialog.Content>27    </Dialog>28  )29}

Form

Wrap Header, Body and Footer in a form. data-autofocus puts focus in the field on open.

tsx

1import { useState, type FormEvent } from 'react'2import { Button, Dialog, Field, Input } from '@highlight/ui'3 4export default function DialogForm() {5  const [open, setOpen] = useState(false)6 7  function handleSubmit(event: FormEvent<HTMLFormElement>) {8    event.preventDefault()9    setOpen(false)10  }11 12  return (13    <Dialog open={open} onOpenChange={setOpen}>14      <Dialog.Trigger>Rename workspace</Dialog.Trigger>15      <Dialog.Content showClose={false}>16        <form onSubmit={handleSubmit} className="flex min-h-0 flex-col">17          <Dialog.Header>18            <Dialog.Title>Rename workspace</Dialog.Title>19            <Dialog.Description>Everyone in the workspace sees the new name.</Dialog.Description>20          </Dialog.Header>21          <Dialog.Body>22            <Field>23              <Field.Label>Workspace name</Field.Label>24              {/* data-autofocus: a dialog that exists to be typed into focuses its field, not itself. */}25              <Input data-autofocus name="name" defaultValue="Acme design" autoComplete="off" />26            </Field>27          </Dialog.Body>28          <Dialog.Footer>29            <Dialog.Close variant="outline">Cancel</Dialog.Close>30            <Button type="submit" variant="primary">31              Save32            </Button>33          </Dialog.Footer>34        </form>35      </Dialog.Content>36    </Dialog>37  )38}

Controlled

open and onOpenChange, with the trigger elsewhere.

tsx

1import { useState } from 'react'2import { Button, Dialog } from '@highlight/ui'3 4export default function DialogControlled() {5  const [open, setOpen] = useState(false)6 7  return (8    <div className="flex items-center gap-3">9      <Button variant="outline" onClick={() => setOpen(true)}>10        Open from outside11      </Button>12      <Dialog open={open} onOpenChange={setOpen}>13        <Dialog.Content>14          <Dialog.Header>15            <Dialog.Title>Controlled</Dialog.Title>16            <Dialog.Description>Open state lives in React.</Dialog.Description>17          </Dialog.Header>18          <Dialog.Footer>19            <Button variant="outline" onClick={() => setOpen(false)}>20              Close programmatically21            </Button>22          </Dialog.Footer>23        </Dialog.Content>24      </Dialog>25    </div>26  )27}

Destructive and blocking

showClose={false} hides the corner button (it defaults to true); disableEscape keeps Escape and the backdrop from closing.

tsx

1import { Dialog } from '@highlight/ui'2 3export default function DialogVariants() {4  return (5    <div className="flex flex-wrap items-center justify-center gap-3">6      <Dialog>7        <Dialog.Trigger variant="primary" tone="danger">8          Delete thread9        </Dialog.Trigger>10        <Dialog.Content showClose={false}>11          <Dialog.Header>12            <Dialog.Title>Delete this thread?</Dialog.Title>13            <Dialog.Description>Messages and attachments are removed for everyone.</Dialog.Description>14          </Dialog.Header>15          <Dialog.Footer>16            <Dialog.Close variant="outline">Cancel</Dialog.Close>17            <Dialog.Close variant="primary" tone="danger">18              Delete19            </Dialog.Close>20          </Dialog.Footer>21        </Dialog.Content>22      </Dialog>23 24      <Dialog disableEscape>25        <Dialog.Trigger variant="primary">Finish setup</Dialog.Trigger>26        <Dialog.Content showClose={false}>27          <Dialog.Header>28            <Dialog.Title>One more step</Dialog.Title>29            <Dialog.Description>Escape and the backdrop are disabled; pick an action to continue.</Dialog.Description>30          </Dialog.Header>31          <Dialog.Footer>32            <Dialog.Close variant="outline">Later</Dialog.Close>33            <Dialog.Close variant="primary">Connect calendar</Dialog.Close>34          </Dialog.Footer>35        </Dialog.Content>36      </Dialog>37    </div>38  )39}

Custom trigger

Open from a text link

tsx

1import { Dialog } from '@highlight/ui'2 3export default function DialogCustomTrigger() {4  return (5    <Dialog>6      <Dialog.Trigger7        nativeButton={false}8        render={9          <span className="text-foreground-secondary hover:text-foreground cursor-pointer text-sm underline underline-offset-4">10            Open from a text link11          </span>12        }13      />14      <Dialog.Content>15        <Dialog.Header>16          <Dialog.Title>Custom trigger</Dialog.Title>17          <Dialog.Description>18            Pass render to make any element the trigger. Set nativeButton to false when it is not a button.19          </Dialog.Description>20        </Dialog.Header>21      </Dialog.Content>22    </Dialog>23  )24}

Parts

The root, then any compound sub-components. Every part accepts className and forwards the rest of its props to the element or Base UI part beneath it.

Dialog: Base UI Dialog.Root. Owns open state; renders nothing itself.
Dialog.Trigger: A Button that opens the dialog. Takes variant, tone, size, shape, or a render element.
Dialog.Content: Portal + Backdrop + Popup + close button. showClose, backdropClassName, initialFocus.
Dialog.Icon: A 36px tile over the title, first inside Header. tone is neutral (default) or danger. Takes an icon node as children; decorative, so the title carries the meaning.
Dialog.Header / Body / Footer: Layout slots. Header holds Icon, Title and Description; Body scrolls when content overflows; Footer is right-aligned with 8px between buttons.
Dialog.Title / Description: Accessible name and description.
Dialog.Close: A Button that closes the dialog.
Dialog.Portal / Backdrop / Popup: Low-level parts when Content is not enough.

Props

Props added on top of the underlying element or Base UI part.

Prop	Type	Default	Description
`disableEscape`	boolean	false	Only explicit Close clicks dismiss the dialog.