Modal

Modal is the base overlay primitive. It renders a token-driven scrim, an elevated panel, and respects the user's reduce-motion preference (no animation when enabled).

Import

import { Modal } from '@mindees/ui';

Usage

const [visible, setVisible] = useState(false);

return (
  <>
    <Button onPress={() => setVisible(true)}>Open</Button>
    <Modal visible={visible} onClose={() => setVisible(false)} accessibilityLabel="Confirm action">
      <Heading level={3}>Title</Heading>
      <Text>Body copy</Text>
    </Modal>
  </>
);

Full-bleed (non-centered) panel — anchors content to the bottom edge:

<Modal visible={visible} onClose={close} centered={false}>
  {/* fills the viewport */}
</Modal>

Props

Prop	Type	Default	Description
visible	boolean	—	Controls whether the modal is shown.
onClose	() => void	—	Called on backdrop press (when dismissible) and on the platform back gesture.
dismissible	boolean	true	When false, backdrop taps are ignored.
centered	boolean	true	Centered panel (max 480 dp); otherwise content fills the screen and aligns to the bottom.
accessibilityLabel	string	—	Label announced to assistive tech when the modal opens.
children	React.ReactNode	—	Modal contents.

Accessibility

Built on React Native's Modal, so the platform handles focus capture and the Android hardware back button (onRequestClose calls onClose). Provide accessibilityLabel so screen readers announce the modal's purpose. When reduce motion is enabled the fade animation is skipped automatically.