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>
          <div className="grid gap-4">
            <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>
          </div>
          <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.Content>
</Dialog.Root>