Dialog

複合コンポーネント（Dialog.Root / Trigger / Portal / Backdrop / Popup / Title / Description / Close）。M3 スクリムとサーフェスダイアログ。

参考: Material Design 3 公式ガイドライン m3.material.io/components/dialogs/overview

Import

import { Dialog, Button, ThemeProvider } from '@m3-baseui/react-tailwind';

使用例

<Dialog.Root>
  <Dialog.Trigger render={<Button variant="tonal">開く</Button>} />
  <Dialog.Portal>
    <Dialog.Backdrop />
    <Dialog.Popup>
      <Dialog.Title>確認</Dialog.Title>
      <Dialog.Description>続行しますか？</Dialog.Description>
      <Dialog.Close render={<Button variant="text">閉じる</Button>} />
    </Dialog.Popup>
  </Dialog.Portal>
</Dialog.Root>

Props

Prop	型	既定値	説明
`open / onOpenChange`	`boolean`	—	制御モードの開閉状態

補足

ポータルも documentElement の変数を継承（ThemeProvider target=document 既定）。