Modal

API reference and demos for Modal.

Source

Import

import { Modal } from "@flanksource/clicky-ui/components";

Demos

Default · Open in Storybook

Playground · Open in Storybook

With Footer · Open in Storybook

The props table documents the component-specific surface. Standard DOM attributes inherited from React, such as className, event handlers, and accessibility attributes, may also be accepted when the component’s prop type extends a native element.

Props

Prop	Type	Default	Description
children*	ReactNode	—	Modal body content.
className	string	—	Classes applied to the dialog panel.
closeOnBackdrop	boolean	false	Close when the backdrop is clicked. Off by default; close via Escape or the close button.
closeOnEsc	boolean	true	Close when Escape is pressed.
confirmClose	boolean | ConfirmCloseOptions	false	Guard every close path (close button, Escape, backdrop) behind a discard confirmation. `true` uses the default copy; pass options to customise it. `onClose` only fires once the user confirms. Set this while the modal holds unsaved edits and clear it (or pass `false`) once there is nothing to lose.
expandable	boolean	true	Show an expand/restore button.
footer	ReactNode	—	Footer content pinned below the scrollable body.
headerSlot	ReactNode	—	Extra header content rendered before the expand/close buttons.
hideClose	boolean	false	Hide the close button.
onClose*	(…) => void	—	Called when the modal requests to close.
open*	boolean	—	Controls whether the modal is mounted.
scrollBody	boolean	true	Whether the body scrolls its overflow. Default `true`. Set `false` when the body owns a single fill-height child that scrolls internally (e.g. a DataTable with a sticky header): the body becomes a non-scrolling flex column, so only that child's own scroll region moves.
size	enum	md	Width/height preset for the dialog.
subtitle	ReactNode	—	Secondary header content rendered on its own row directly beneath the title. The title stays a single row alongside the expand/close buttons, so a tall subtitle (e.g. a tab switcher) never pushes those buttons down.
title	ReactNode	—	Header title and accessible dialog label when it is a string.