Dialog

任意の内容を表示する汎用モーダル。通話テキスト全文表示、顧客情報の編集、詳細ビューなど、画面遷移せずにじっくり読み書きさせたい場面に使う。AlertDialog (最終確認専用) との違いは、Esc / オーバーレイクリックで閉じられる汎用性。

プレビュー

通話テキスト全文表示の例。トリガーを押すとモーダルが開き、本文をスクロールできる。

実装例

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

export function Example() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="secondary" size="m">通話テキストを開く</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>通話テキスト全文</DialogTitle>
          <DialogDescription>
            2026-03-19 11:03:22 / 山田 太郎 様 / 担当: 佐藤
          </DialogDescription>
        </DialogHeader>
        {/* 中身: スクロールできる本文エリア */}
        <DialogFooter>
          <Button variant="primary" size="m">コピー</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

Dialog を使用したコンポーネント

頻繁に利用するダイアログのパターンを、propsとスタイリングを整えた variant コンポーネントとして用意しています。

ActionDialog
ユーザーに確認や単純な操作を求めるダイアログ。フォーム要素を含まない確認・実行のシーンで使う。Cancel + Action の 2 ボタン構成。
MessageDialog
ユーザーに情報を提示するためのダイアログ。入力などの操作を伴わずにメッセージを表示するときに使う。閉じるボタンのみ。
StepFormDialog
ステップを複数に分けたウィザード形式のダイアログ。タスクの完了に複数の操作が必要な場合に使う。戻る / キャンセル / 次への 3 ボタン構成。
AlertDialog
取り消しのきかない操作 (削除・送信など) で、ユーザーに最終確認を求めるダイアログ。Esc / オーバーレイクリックでは閉じず、Cancel / Action の 2 ボタン構成で応答を必須にする。

仕様

primitive: src/components/ui/dialog.tsx(shadcn 公式 + Thinca Button へ size 適合)
構成: Dialog / DialogTrigger / DialogContent / DialogHeader / DialogTitle / DialogDescription / DialogFooter / DialogClose
右上の閉じるボタン(×)は自動で表示。showCloseButton={false} で非表示にできる
Esc / overlay click / 右上 × ボタンで閉じる
色・余白は shadcn デフォルトのまま。Thinca tokens 化は後日対応