dialog
Modal overlay with dither backdrop
Coredialog.cssdialog.js
Installation
$
npx skeehn add dialogPreview
Preview not yet available for this component.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | false | Whether the dialog is visible |
| onClose | () => void | — | Close callback |
| variant | 'dither' | 'outline' | — | Visual variant |
Usage
dialog.tsx
1import { Dialog, DialogContent, DialogHeader, DialogBody, DialogFooter } from '@skeehn/react';2import { Button } from '@skeehn/react';3import { useState } from 'react';45export function ConfirmDialog() {6 const [open, setOpen] = useState(false);7 return (8 <>9 <Button onClick={() => setOpen(true)}>Open Dialog</Button>10 <Dialog open={open} onClose={() => setOpen(false)}>11 <DialogContent>12 <DialogHeader>Confirm Action</DialogHeader>13 <DialogBody>Are you sure you want to proceed?</DialogBody>14 <DialogFooter>15 <Button variant="ghost" onClick={() => setOpen(false)}>Cancel</Button>16 <Button variant="solid" onClick={() => setOpen(false)}>Confirm</Button>17 </DialogFooter>18 </DialogContent>19 </Dialog>20 </>21 );22}