Modal

Stable

Dialog overlays with ESC key support and backdrop click to close.

Import

import { Modal } from '@brutal-ui/react';

Basic Usage

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

<Button onClick={() => setIsOpen(true)}>Open Modal</Button>

<Modal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  title='Modal Title'
>
  <p>This is a modal dialog.</p>
  <Button onClick={() => setIsOpen(false)}>Close</Button>
</Modal>

Props

Prop	Type	Default	Description
isOpen	boolean	-	Controls modal visibility
onClose	function	-	Called when modal should close
title	string	-	Optional modal title
size	string	"md"	Modal size: sm, md, lg, xl
closeOnOverlayClick	boolean	true	Close on backdrop click

Features

⌨️ Keyboard Support

Press ESC key to close the modal automatically.

🎯 Focus Management

Focus is trapped inside the modal when open.

📱 Responsive

Adapts to mobile screens with proper padding.

♿ Accessible

Includes proper ARIA attributes for screen readers.