ActionDialog

import { Button } from "@/components/Button";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";

export function Example() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="primary" size="m">タグを登録</Button>
      </DialogTrigger>
      <DialogContent
        showCloseButton={false}
        className="!w-[var(--width-dialog-s)] !max-w-none !gap-0 !p-0 !ring-0 shadow-layer-4 overflow-hidden"
      >
        <div className="p-[var(--spacing-xs)] border-b border-[var(--border-default)] bg-[var(--bg-surface)]">
          <DialogTitle className="!text-[length:var(--font-size-l)] !font-medium !leading-[1.25]">
            タグを登録しますか?
          </DialogTitle>
        </div>
        <div className="p-[var(--spacing-xs)] bg-[var(--bg-surface)] text-[color:var(--text-primary)] tds-text-body-m">
          この顧客に「重要顧客」タグを付与します。
        </div>
        <div className="p-[var(--spacing-xs)] border-t border-[var(--border-default)] bg-[var(--bg-surface)] flex items-center justify-end gap-[var(--spacing-xxs)]">
          <DialogClose asChild>
            <Button variant="secondary" size="s">キャンセル</Button>
          </DialogClose>
          <DialogClose asChild>
            <Button variant="primary" size="s">登録</Button>
          </DialogClose>
        </div>
      </DialogContent>
    </Dialog>
  );
}