Components

Modal

Dialog modal with backdrop, focus trapping, keyboard dismissal, and optional footer actions.

import{ Modal }from"oks-ui"

Focus trapEscape dismissBackdrop blurCustom sizesFooter actions

Basic

Controlled via isOpen and onClose. Supports title, children, and footer actions.

Interactive Playground

Controls

title

size

dismissible

closeOnOutsideClick

closeOnEscape

Preview

Generated Code

const [isOpen, setIsOpen] = useState(false);

<Button onPress={() => setIsOpen(true)}>Open Modal</Button>
<Modal isOpen={isOpen} onClose={() => setIsOpen(false)} title="Modal Title">
  This is the modal body.
</Modal>

Props

Prop	Type	Default	Description
isOpen	boolean	—	Controls visibility (required).
onClose	() => void	—	Called when modal is dismissed (required).
title	ReactNode	—	Modal title rendered in the header.
children	ReactNode	—	Modal body content.
actions	ReactNode	—	Footer action buttons.
size	"sm" \| "md" \| "lg"	"md"	Modal size.
dismissible	boolean	true	Show close button.
closeOnOutsideClick	boolean	true	Close on backdrop click.
closeOnEscape	boolean	true	Close on Escape key.
blur	boolean \| 'sm' \| 'md' \| 'lg' \| number	false	Backdrop blur intensity.
portal	boolean	true	Render in portal.

isOpen—

boolean

Controls visibility (required).

onClose—

() => void

Called when modal is dismissed (required).

title—

ReactNode

Modal title rendered in the header.

children—

ReactNode

Modal body content.

actions—

ReactNode

Footer action buttons.

size"md"

"sm" | "md" | "lg"

Modal size.

dismissibletrue

boolean

Show close button.

closeOnOutsideClicktrue

boolean

Close on backdrop click.

closeOnEscapetrue

boolean

Close on Escape key.

blurfalse

boolean | 'sm' | 'md' | 'lg' | number

Backdrop blur intensity.

portaltrue

boolean

Render in portal.