MessageDialog

Dialog の variant。ユーザーに情報を提示するためのダイアログ。入力などの操作を伴わずに、メッセージや情報を表示するときに使う。ダイアログ表示中は裏側の領域がスクリムで隠れ、操作を受け付けない。

プレビュー

トリガーを押すと情報表示ダイアログが開く。フッターは閉じるボタンのみ。

実装例

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

export function Example() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="secondary" 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">
          2026年8月10日(月) 02:00〜04:00 の間、サーバーメンテナンスを行います。
        </div>
        <div className="p-[var(--spacing-xs)] border-t border-[var(--border-default)] bg-[var(--bg-surface)] flex items-center justify-end">
          <DialogClose asChild>
            <Button variant="secondary" size="s">閉じる</Button>
          </DialogClose>
        </div>
      </DialogContent>
    </Dialog>
  );
}

仕様

primitive: src/components/ui/dialog.tsx をベースに Figma 仕様のヘッダー / ボディ / フッター 3 枠構造でラップする
幅: var(--width-dialog-s) (424px 相当)
ヘッダー: p-16 / border-b、タイトル 20px medium
ボディ: p-16、本文 16px
フッター: p-16 / border-t、右寄せに閉じるボタンのみ
閉じるボタン(×)は表示しない (showCloseButton=false)。フッターの閉じるボタンまたは Esc / overlay click で閉じる
shadow: shadow-layer-4

使い分け

MessageDialog: 情報提示のみ。ユーザーに応答を求めない
ActionDialog: 確認や単純な操作を求める場合 (Cancel + Action 構成)
Toast: 一時的な通知で十分な場合はモーダルではなく Toast を検討する