Modal

A Card centered in the viewport with a dimmed backdrop that blocks interaction with the rest of the page, built on Radix Dialog for focus trapping, Escape-to-close, and outside-click-to-close. It has no opinion on what goes inside the panel — an optional title renders a header with a close button, otherwise just the children are shown.

For a panel that docks to an edge of the viewport instead — optionally non-blocking — use @behivetech/atoms.drawer.

Usage

Props

Prop	Type	Default	Description
onClose	() => void	—	Called when the modal is dismissed (backdrop click, Escape, or the close button) — required
title	string	—	Optional header title; omit to render no header and no close button
icon	ReactNode	—	Optional icon rendered before the title; ignored if title is omitted
padding	none | sm | md | lg	none	Internal padding of the panel body — same values as Card's padding prop
headingLevel	1 | 2 | 3 | 4 | 5 | 6	3	Which heading tag wraps title — same values as Card's headingLevel prop
children	ReactNode	—	Dialog content
className	string	—	Additional class names