overlay
Dialog
アニメーション付きオーバーレイを備えたモーダルダイアログ。フォーカストラップ・スクロールロック・キーボード操作に対応。
インポート
import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose } from '@stella-ds/react'DialogDialogTriggerDialogContentDialogHeaderDialogFooterDialogTitleDialogDescriptionDialogClose
Props
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
| showClose (DialogContent) | boolean | true | Show default × close button |
Preview
使用例
Basic
<Dialog>
<DialogTrigger asChild><Button>Open Dialog</Button></DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Are you sure?</DialogTitle>
<DialogDescription>This action cannot be undone.</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button variant="outline">Cancel</Button>
<Button>Confirm</Button>
</DialogFooter>
</DialogContent>
</Dialog>