Modal

Centered, focus-trapping dialog overlay with backdrop, title, and dismiss handling.

Modal is a portaled, centered dialog for focused tasks that should block the rest of the page — confirmations, forms, detail views. It renders a dimmed backdrop, sets role="dialog" with aria-modal, and dismisses on Escape, backdrop click, or the close button. It is controlled: drive open from your own state and clear it in onClose.

Example

Preview

import { Modal } from '@officina/ui';
import { useState } from 'react';

function EditDialog() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button onClick={() => setOpen(true)}>Edit</button>
      <Modal
        open={open}
        onClose={() => setOpen(false)}
        title="Edit profile"
        description="Update your account details."
      >
        {/* form fields */}
      </Modal>
    </>
  );
}

API

Prop	Type	Default	Description
children*	ReactNode	—	Dialog body content.
onClose*	() => void	—	Called when the user dismisses the modal (overlay click, Esc, close button).
open*	boolean	—	Whether the modal is visible.
description	ReactNode	—	Supporting text rendered under the title.

Example

API

On this page