Modal

import { Modal } from '@enmovil/ui-design-system';

A centred dialog with a title, your content and a footer of action buttons that you supply in actionButtons. Show it with open and handle closing in onCancel.

Properties

Property	Type	Required	Default	Allowed values	Description
className	string	No	—	—	Extra CSS class added to the modal.
actionButtons	ReactNode[]	Yes	—	—	Buttons shown in the footer, in order. Without it, or when it is empty, the modal has no footer; it always replaces footer.
open	boolean	No	—	—	Whether the modal is shown. Defaults to false.
title	ReactNode	No	—	—	Shown in the modal's header.
width	string | number | Partial<Record<Breakpoint, string | number>>	No	—	—	Width of the dialog: a number in pixels or any CSS length. Defaults to 520.
maskClosable	boolean	No	—	—	Whether to close the modal dialog when the mask (area outside the modal) is clicked
keyboard	boolean	No	—	—	Whether pressing Esc closes the modal by calling onCancel. Defaults to true.

Other attributes

Modal passes 38 further attributes through to the underlying element. They aren't part of the supported API and may change between releases, so use only the properties listed on this page.

Events

Name	Signature	When it fires
onCancel	((e: MouseEvent<HTMLButtonElement, MouseEvent>) => void)	Fires when the user dismisses the modal: the close icon, a mask click (with maskClosable) or Esc (with keyboard). Set open to false here.
afterClose	(() => void)	Fires once the modal has fully closed. Use it to reset form state.
afterOpenChange	((open: boolean) => void)	Fires once the open or close animation has finished. Use it to focus a field after opening.

Children

children (ReactNode): —

Variants

Loading examples…

Playground

Change the controls to see how the properties affect the component. Values the controls don't cover come from the Default example.

Loading playground…

Storybook

Open Modal in Storybook to try every story with the full set of controls.