One-line: a focused task that must be finished or abandoned before the page continues.

```jsx
<Dialog>
  <DialogTrigger><Button variant="outline">Invite teammate</Button></DialogTrigger>
  <DialogPopup>
    <DialogHeader><DialogTitle>Invite teammate</DialogTitle><DialogDescription>They will get an email to join your team.</DialogDescription></DialogHeader>
    <DialogPanel><Field><Label htmlFor="e">Email</Label><Input id="e" /></Field></DialogPanel>
    <DialogFooter><DialogClose><Button variant="ghost">Cancel</Button></DialogClose><Button>Send invite</Button></DialogFooter>
  </DialogPopup>
</Dialog>
```

The cancel button is \`ghost\`, never \`outline\`. Titles use the heading font at 20px/600.
