Overview

Modals are positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead. Modals are unmounted when closed.

Bootstrap only supports one modal window at a time. Nested modals aren’t supported, but if you really need them the underlying react-overlays can support them if you're willing.

Modal's "trap" focus in them, ensuring the keyboard navigation cycles through the modal, and not the rest of the page. Unlike vanilla Bootstrap, autoFocus works in Modals because React handles the implementation.

Basic Modal

A modal with header, body, and set of actions in the footer. Use <Modal/> in combination with other components to show or hide your Modal. The <Modal/> Component comes with a few convenient "sub components": <Modal.Header/>, <Modal.Title/>, <Modal.Body/>, and <Modal.Footer/>, which you can use to build the Modal content.

Live Example

Use show prop on <Modal> to control its visibility and useState to set the visibility state on click of <Button>. You can vertically center a modal by passing the "centered" prop.

Optional Sizes

You can specify a bootstrap large or small modal by using the "size" prop.These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.

SizeClassModal max-width
Small.modal-sm300px
DefaultNone500px
Large.modal-lg800px
Extra large.modal-xl1140px

API

import Modal from `@trimbleinc/modus-react-bootstrap/Modal`
NameTypeDefaultDescription
animation
boolean
true

Open and close the Modal with a slide and fade animation.

aria-labelledby
any
autoFocus
boolean
true

When true The modal will automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. Generally this should never be set to false as it makes the Modal less accessible to assistive technologies, like screen-readers.

backdrop
'static' | true | false
true

Include a backdrop component. Specify 'static' for a backdrop that doesn't trigger an "onHide" when clicked.

backdropClassName
string

Add an optional extra class name to .modal-backdrop It could end up looking like class="modal-backdrop foo-modal-backdrop in".

centered
boolean

vertically center the Dialog in the window

container
any
contentClassName
string

Add an optional extra class name to .modal-content

dialogAs
elementType
<ModalDialog>

A Component type that provides the modal content Markup. This is a useful prop when you want to use your own styles and markup to create a custom modal component.

dialogClassName
string

A css class to apply to the Modal dialog DOM node.

enforceFocus
boolean
true

When true The modal will prevent focus from leaving the Modal while open. Consider leaving the default value here, as it is necessary to make the Modal work well with assistive technologies, such as screen readers.

keyboard
boolean
true

Close the modal when escape key is pressed

manager
object

A ModalManager instance used to track and manage the state of open Modals. Useful when customizing how modals interact within a container

onEnter
function

Callback fired before the Modal transitions in

onEntered
function

Callback fired after the Modal finishes transitioning in

onEntering
function

Callback fired as the Modal begins to transition in

onEscapeKeyDown
function

A callback fired when the escape key, if specified in keyboard, is pressed.

onExit
function

Callback fired right before the Modal transitions out

onExited
function

Callback fired after the Modal finishes transitioning out

onExiting
function

Callback fired as the Modal begins to transition out

onHide
function

A callback fired when the header closeButton or non-static backdrop is clicked. Required if either are specified.

onShow
function

A callback fired when the Modal is opening.

restoreFocus
boolean
true

When true The modal will restore focus to previously focused element once modal is hidden

restoreFocusOptions
shape

Options passed to focus function when restoreFocus is set to true

scrollable
boolean

Allows scrolling the <Modal.Body> instead of the entire Modal when overflowing.

show
boolean
false

When true The modal will show itself.

size
'sm' | 'lg','xl'

Render a large, extra large or small modal. When not provided, the modal is rendered with medium (default) size.

bsPrefix
string
'modal'
import ModalDialog from `@trimbleinc/modus-react-bootstrap/ModalDialog`
NameTypeDefaultDescription
centered
boolean

Specify whether the Component should be vertically centered

contentClassName
string
scrollable
boolean

Allows scrolling the <Modal.Body> instead of the entire Modal when overflowing.

size
'sm' | 'lg','xl'

Render a large, extra large or small modal.

bsPrefix
string
'modal'
import ModalHeader from `@trimbleinc/modus-react-bootstrap/ModalHeader`
NameTypeDefaultDescription
closeButton
boolean
false

Specify whether the Component should contain a close button

closeLabel
string
'Close'

Provides an accessible label for the close button. It is used for Assistive Technology when the label text is not readable.

onHide
function

A Callback fired when the close button is clicked. If used directly inside a Modal component, the onHide will automatically be propagated up to the parent Modal onHide.

bsPrefix
string
import ModalTitle from `@trimbleinc/modus-react-bootstrap/ModalTitle`
NameTypeDefaultDescription
as
elementType
<DivStyledAsH4>
bsPrefix required
string
'modal-title'
import ModalBody from `@trimbleinc/modus-react-bootstrap/ModalBody`
NameTypeDefaultDescription
as
elementType
<div>
bsPrefix required
string
'modal-body'
import ModalFooter from `@trimbleinc/modus-react-bootstrap/ModalFooter`
NameTypeDefaultDescription
as
elementType
<div>
bsPrefix required
string
'modal-footer'