Modal

A modal dialog box component for message prompts, confirmation messages, and content submission.

Import

MainIndividual
import { Modal } from 'rsuite';
  • Modal The container of Modal.
  • Modal.Header The header of the modal dialog box.
  • Modal.Title The title of the modal dialog box.
  • Modal.Body The content of the modal dialog box.
  • Modal.Footer The footer of the modal dialog box.

Examples

Basic

Backdrop

Control the behavior of the Modal's backdrop:

  • true: Show backdrop, and clicking it will close the Modal
  • false: Do not show backdrop
  • 'static': Show backdrop, but clicking it will not close the Modal

Vertical center

Use the centered prop to vertically center the Modal on the page.

Size

Set different sizes for the Modal using the size prop. Available options include: 'xs', 'sm', 'md', 'lg', 'full', or a custom width.

Content overflow

When the Modal content is too long, the content area will automatically display a scrollbar.

Dynamic content

Demonstrates how to dynamically load content within a Modal, suitable for asynchronous data loading scenarios.

Alert dialogs

Use role="alertdialog" to create an alert dialog, suitable for important information that requires immediate user attention.

Form

Embed forms within a Modal, suitable for data collection and submission operations.

Custom layout

Create a custom Modal with a split-panel layout, featuring a branded left side and a form on the right side.

useDialog

For common dialog scenarios, you can use useDialog to simplify dialog usage.

Responsive

On mobile devices, the Modal's maximum width will stretch to fill the screen while maintaining margins.

Accessibility

WAI-ARIA Roles, States, and Properties

  • Modal has role dialog.
  • Modal has aria-modal set to true. Tells assistive technologies that the windows underneath the current dialog are not available for interaction (inert).
  • Modal will automatically add aria-labelledby attribute to point to the Modal.Title component. Use aria-describedby attribute to add a description to the Modal.Body component. You can also manually add aria-labelledby and aria-describedby attributes to override the default setting.
<Modal aria-labelledby="modal-title" aria-describedby="modal-description">
  <Modal.Header>
    <Modal.Title id="modal-title">My Title</Modal.Title>
  </Modal.Header>
  <Modal.Body id="modal-description">My Description</Modal.Body>
</Modal>
<Modal role="alertdialog" backdrop="static">
  ...
</Modal>

Keyboard Interaction

  • ESC can close the Modal. This functionality can be disabled by setting keyboard=false.
  • Tab When the Modal is open, focus automatically moves inside the Modal. Pressing Tab cycles through focusable elements within the Modal.
  • Shift + Tab Reverse cycles through focusable elements within the Modal.
  • When the Modal closes, focus returns to the element that triggered the Modal to open.

Props

<Modal>

Property Type (Default) Description
autoFocus boolean (true) When set to true, the Modal is opened and is automatically focused on its own, accessible to screen readers
backdrop unions: boolean | 'static' When set to true, the Modal will display the background when it is opened. Clicking on the background will close the Modal. If you do not want to close the Modal, set it to 'static'.
backdropClassName string Add an optional extra class name to .modal-backdrop It could end up looking like class="modal-backdrop foo-modal-backdrop in".
bodyFill boolean Remove default padding from the dialog and body so the content can occupy the full height. Useful for creating custom layouts with full-width/height content.
centered boolean Align the modal vertically in the center of the page.
children ReactNode Modal content
classPrefix string ('modal') The prefix of the component CSS class
container HTMLElement | (() => HTMLElement) Sets the rendering container
dialogAs ElementType (ModalDialog) You can use a custom element type for Dialog
dialogClassName string CSS class applied to Dialog DOM nodes.
dialogStyle CSSProperties CSS style applied to Dialog DOM nodes.
enforceFocus boolean (true) When set to true, Modal will prevent the focus from leaving when opened, making it easier for the secondary screen reader to access
keyboard boolean (true) Close Modal when esc key is pressed.
onClose () => void Callback fired when Modal hide
onEnter () => void Callback fired before the Modal transitions in
onEntered () => void Callback fired after the Modal finishes transitioning in
onEntering () => void Callback fired as the Modal begins to transition in
onExit () => void Callback fired right before the Modal transitions out
onExited () => void Callback fired after the Modal finishes transitioning out
onExiting () => void Callback fired as the Modal begins to transition out
onOpen () => void Callback fired when Modal display
open * boolean Show Modal
overflow boolean (true) Automatically sets the height when the body content is too long.
size 'xs' | 'sm' | 'md' | lg' | 'full' | number | string ('sm') Determine the width of the modal

<Modal.Header>

Property Type (Default) Description
as ElementType ('div') You can use a custom element for this component
children ReactNode Header content
classPrefix string ('modal-header') The prefix of the component CSS class
closeButton boolean (true) Display close button
onClose (event) => void Called when Modal is hidden

<Modal.Title>

Property Type (Default) Description
as ElementType ('h4') You can use a custom element for this component
children ReactNode Title content
classPrefix string ('modal-title') The prefix of the component CSS class

<Modal.Footer>

Property Type (Default) Description
as ElementType ('div') You can use a custom element for this component
children ReactNode Footer content
classPrefix string ('modal-footer') The prefix of the component CSS class

<Modal.Body>

Property Type (Default) Description
as ElementType ('div') You can use a custom element for this component
children ReactNode Body content
classPrefix string ('modal-body') The prefix of the component CSS class