Modal

A centred dialog with a backdrop, focus trap and footer slot.

import

import { Modal } from '@joshicodes/cock';

Confirm

Form

Keyboard

Esc: Closes, unless `dismissible` is false
Tab: Cycles inside the dialog

Behaviour

Renders into `<body>` and positions itself against its trigger, so an `overflow: hidden` ancestor or a scrolling table cannot clip it.
Locks body scrolling while open, counted, so nested overlays do not unlock it early.
Focus moves to the first focusable element and returns to the opener on close.

API

Read out of the component sources at build time, so it matches the version you installed. Every component also takes class, merged through tailwind-merge so your utility wins.

Props of Modal

Prop	Type	Default
`open` bindable	`boolean`	`false`
`title`	`string`	—
`description`	`string`	—
`size`	`'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'`	`'md'`
`dismissible` Clicking the backdrop closes the modal.	`boolean`	`true`
`hideClose` Hide the built-in close button in the header.	`boolean`	`false`
`class`	`string`	—

Snippets of Modal

Snippet	Type	Default
`children`	`Snippet`	—
`footer` Pinned to the bottom of the panel, separated by a hairline.	`Snippet`	—

Events of Modal

Event	Type	Default
`onclose`	`() => void`	—