A basic and commonly used modal.
Modals can be opened or closed with a
This example includes a wrapper component that opens the modal when the button is clicked on.
Function that fires to close the modal.
Content that appears above the Backdrop.
Function that fires once the modal has opened and transitions have ended.
Function that fires once the modal has closed and transitions have ended.
Determines if the modal should close when clicking on the Backdrop,
outside of the
Determines if the close button should be rendered. This is generally discouraged and should be used carefully. If used, the contents passed into the modal must contain a focusable element such as a link or button.
Should the Backdrop appear open.
Sets the color of the background and close button.
oneOf([ 'brand', 'faint', ])