Dialog

インポート

import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@caroainc/ui-components/client'

個別サブパス（バンドルサイズを抑えたい場合）:

import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@caroainc/ui-components/dialog'

Composition

Dialog
├─ DialogTrigger?
└─ DialogContent
   ├─ DialogHeader?
   │  ├─ DialogTitle
   │  └─ DialogDescription?
   ├─ 本文
   └─ DialogFooter?

DialogContentを表示する場合はアクセシブルな名前となるDialogTitleが必須で、DialogTriggerは制御されたopenを使う場合のみ省略できます。DialogContentはPortalとOverlayを内部で構成するため、ルートのDialog外へ出したり手動で重ねたりしないでください。

基本的な使い方

<Dialog>
  <DialogTrigger asChild>
    <Button>ダイアログを開く</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>タイトル</DialogTitle>
      <DialogDescription>説明文</DialogDescription>
    </DialogHeader>
    <div>コンテンツ</div>
    <DialogFooter>
      <Button>確認</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

フォーム付き

<Dialog>
  <DialogTrigger asChild>
    <Button>プロフィール編集</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>プロフィール編集</DialogTitle>
    </DialogHeader>
    <div className="grid gap-4 py-4">
      <Input />
    </div>
    <DialogFooter>
      <Button>保存</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

サイズ

size propでダイアログの最大幅を調整できます。

<DialogContent size="sm">...</DialogContent>
<DialogContent size="default">...</DialogContent>  {/* デフォルト（従来のmax-w-lg） */}
<DialogContent size="lg">...</DialogContent>
<DialogContent size="xl">...</DialogContent>
<DialogContent size="full">...</DialogContent>

長いコンテンツへの対応

DialogContent はデフォルトで高さを制限しません。本文が画面高さを超える場合は、 className で最大高さとスクロールを明示的に付与してください（見た目の挙動が変わるため、コンポーネント側では自動付与していません）。

<DialogContent className="max-h-[85vh] overflow-y-auto">
  <DialogHeader>
    <DialogTitle>長いコンテンツ</DialogTitle>
  </DialogHeader>
  <div className="space-y-4">
    {/* 画面高さを超える可能性のあるコンテンツ */}
  </div>
</DialogContent>

Props

Dialog

Prop	Type	Default	Description
`open`	`boolean`	`-`	開閉状態（制御コンポーネント）
`onOpenChange`	`(open: boolean) => void`	`-`	開閉変更時のコールバック

DialogContent

Prop	Type	Default	Description
`size`	`'sm' \| 'default' \| 'lg' \| 'xl' \| 'full'`	`'default'`	ダイアログの最大幅
`showCloseButton`	`boolean`	`true`	右上の閉じるボタンを表示するか
`className`	`string`	`-`	追加のCSSクラス

Dialog

On this page