Dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

"use client";

import { Button } from "@smartacteam/ambient-web/button";
import { Dialog } from "@smartacteam/ambient-web/dialog";
import { Input } from "@smartacteam/ambient-web/input";
import { Label } from "@smartacteam/ambient-web/label";

export function DialogDemo() {
  return (
    <Dialog.Root>
      <form>
        <Dialog.Trigger render={<Button>Open Dialog</Button>} />
        <Dialog.Content className="sm:max-w-106.25">
          <Dialog.Header>
            <Dialog.Title>Edit profile</Dialog.Title>
            <Dialog.Description>
              Make changes to your profile here. Click save when you&apos;re
              done.
            </Dialog.Description>
          </Dialog.Header>
          <Dialog.Body>
            <div className="grid gap-3">
              <Label htmlFor="name-1">Name</Label>
              <Input.Text id="name-1" name="name" defaultValue="Pedro Duarte" />
            </div>
            <div className="grid gap-3">
              <Label htmlFor="username-1">Username</Label>{" "}
              <Input.Text
                id="username-1"
                name="username"
                defaultValue="@peduarte"
              />
            </div>
          </Dialog.Body>
          <Dialog.Footer>
            <Dialog.Close render={<Button>Cancel</Button>} />
            <Button type="submit" variant="primary">
              Save changes
            </Button>
          </Dialog.Footer>
        </Dialog.Content>
      </form>
    </Dialog.Root>
  );
}

Usage

import { Dialog } from "@smartacteam/ambient-web/dialog";

<Dialog.Root>
  <Dialog.Trigger>Open</Dialog.Trigger>
  <Dialog.Content>
    <Dialog.Header>
      <Dialog.Title>Are you absolutely sure?</Dialog.Title>
      <Dialog.Description>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </Dialog.Description>
    </Dialog.Header>
    <Dialog.Body>{/* Fields, lists, anything between */}</Dialog.Body>
    <Dialog.Footer>
      <Dialog.Close render={<Button>Cancel</Button>} />
      <Button variant="primary">Delete account</Button>
    </Dialog.Footer>
  </Dialog.Content>
</Dialog.Root>

Dialog.Content pads its parts with one 24px inset and stacks them 16px apart, so Dialog.Body adds no padding of its own. The close button sits in Dialog.Header's title row, centered on the title's first line; a dialog with no header pins it to the corner. showCloseButton={false} leaves it out.