Modal

Basic Modal

The Modal positions itself on top of other content, with an overlay, often used to add/edit information, feedback, show more information, and more.

Control open state

Control state through the isOpen boolean prop, and update the state with the onRequestClose callback.

Close it by clicking the overlay, the close button, or press ESC, all of which will trigger the onRequestClose event.

Layout example with buttons

Fixed width

The modal stretches to acommodate its content by default, so adding a width (number in px or a CSS length string) is often a good idea if you want text to wrap.

If the content exceeds available screen space (typically for mobile devices), a scrollbar will be rendered inside the modal.

Prevent closing

We provide three props to control how the modal can be closed:

• noCloseButton prevents rendering an "X" close button
• noCloseOnOverlayClick prevents closing on overlay click
• noCloseOnEsc prevents closing on ESC keypress

Not passing onRequestClose has the same effect as passing noCloseButton, noCloseOnOverlayClick and noCloseOnEsc.

Loading spinner

For displaying a temporary app-wide loading spinner it can be useful to not allow any way to close the modal

Transparent

The transparent prop removes the default modal background.

Note: Since the overlay will be dark in both light and dark mode, the default bifrost light mode text color (black) will not be readable!

If you place text or icons directly on the overlay you therefore need to use a static color that will be visible on a dark background, like white or #f3f3f6.

Loading example