Dialog

<DialogTrigger>
  <Button>Invite member</Button>
  <Dialog
    {...args}
    description="They will get an email with a link to join Northwind."
    footer={<><Button variant="outline" slot="close">Cancel</Button><Button slot="close">Send invite</Button></>}
  >
    <TextField label="Email" type="email" autoComplete="email" />
  </Dialog>
</DialogTrigger>

<DialogTrigger defaultOpen>
  <Button>Invite member</Button>
  <Dialog
    {...args}
    description="They will get an email with a link to join Northwind."
    footer={<><Button variant="outline" slot="close">Cancel</Button><Button slot="close">Send invite</Button></>}
  >
    <TextField label="Email" type="email" autoComplete="email" />
  </Dialog>
</DialogTrigger>

<DialogTrigger defaultOpen>
  <Button variant="destructive">Remove Tom Ellis</Button>
  <Dialog
    role="alertdialog"
    size="sm"
    title="Remove Tom Ellis?"
    description="Tom will lose access to Northwind straight away. You can invite him again later."
    footer={<><Button variant="outline" slot="close" autoFocus>Cancel</Button><Button variant="destructive" slot="close">Remove member</Button></>}
  />
</DialogTrigger>

<div className="flex flex-wrap gap-gap-md">
  {(['xs', 'sm', 'md', 'lg', 'full'] as const).map((s) => (
    <DialogTrigger key={s}>
      <Button variant="outline">Open {s}</Button>
      <Dialog size={s} title={`Dialog, size ${s}`} description="Sizes change the maximum width only." footer={<Button slot="close">Done</Button>} />
    </DialogTrigger>
  ))}
</div>

<DialogTrigger defaultOpen>
  <Button variant="destructive">Delete draft</Button>
  <Dialog
    role="alertdialog"
    size="xs"
    title="Delete this draft?"
    description="You can't undo this."
    footer={<><Button variant="outline" slot="close" autoFocus>Cancel</Button><Button variant="destructive" slot="close">Delete</Button></>}
  />
</DialogTrigger>

<DialogTrigger defaultOpen>
  <Button>Set up your team</Button>
  <Dialog
    title="Invite your team"
    description="Step 2 of 3. You can add more people later."
    footerStart={<Button variant="ghost">Back</Button>}
    footer={<><Button variant="outline" slot="close">Skip</Button><Button>Continue</Button></>}
  >
    <TextField label="Email" type="email" autoComplete="email" />
  </Dialog>
</DialogTrigger>

<DialogTrigger defaultOpen>
  <Button>Read the terms</Button>
  <Dialog
    scrollBody
    title="Terms of service"
    description="Last updated 1 October 2026."
    footer={<><Button variant="outline" slot="close">Decline</Button><Button slot="close">Accept</Button></>}
  >
    {Array.from({ length: 12 }, (_, i) => (
      <p key={i} className="text-body-md">{i + 1}. These terms cover how you use Northwind, what we do with your data and how either of us can end the agreement. Read each section before you accept.</p>
    ))}
  </Dialog>
</DialogTrigger>