Modal

Controlled dialog: you own open and get onClose from the backdrop, the ✕ button and Esc. Focus is trapped inside while open.


import { Modal, Button } from '@gg-software/ui';
 
const [open, setOpen] = useState(false);
 
<Button onClick={() => setOpen(true)}>Open modal</Button>
 
<Modal
    open={open}
    onClose={() => setOpen(false)}
    title="Delete project?"
    footer={
        <>
            <Button onClick={() => setOpen(false)}>Cancel</Button>
            <Button variant="primary" danger onClick={confirmDelete}>Delete</Button>
        </>
    }
>
    This action cannot be undone.
</Modal>

Props

Prop	Type	Default	Description
`open`*	`boolean`	—
`onClose`*	`() => void`	—
`title`	`ReactNode`	—
`children`	`ReactNode`	—	content rendered inside the component
`footer`	`ReactNode`	—
`size`	`"sm" \| "md" \| "lg" \| "full"`	`md`
`closeOnBackdrop`	`boolean`	`true`
`showClose`	`boolean`	`true`
`className`	`string`	—

* required · generated from packages/ui/src/containers/Modal/Modal.tsx