Modals are used to overlay content above an interface. They are intended to capture the user’s attention in order to inform or shift focus to a pertinent task.

Always specify a appElementSelector property to trap keyboard focus in the modal and hide the rest of the app content temporarily.

import { Modal } from '@sproutsocial/racine'


section of app to aria hide for the modal
trigger to open or close the modal
label for screen readers to announce the modal
body content of the modal
onClose() => any
callback for close
aria-label for modal X
Controls the z-index CSS property
The max width of the modal container


The Modal.Header subcomponent is optional (not all Modals have to have headers), but if a header is present it should always be rendered as the first child of the Modal.

The following example shows a Modal header with a title and subtitle. Note: when rendered within an actual Modal, a close button will also be shown.

This title and subtitle configuration is the default, but if you would like to create your own header you can do so by passing children:

Note that the bordered prop is needed on a custom header if the bottom border is desired. If children are provided, the title and subtitle props are ignored.

Passing children will override the default modal header
If you're rendering a custom header, you can use this prop to add a bottom border

The Modal.CloseButton subcomponent renders an icon button (using the icon) that will close the parent Modal when clicked.

The Modal.Content subcomponent is a simple wrapper used to contain the content of a Modal (any items not within the header or footer), and ensures that the contents scroll when appropriate.

The Modal.Footer subcomponent renders it’s children with the appropriate padding and border for the footer of a Modal. This component should always be rendered after an instance of Modal.Content.


Modal headers can be omitted altogether, or they can render only a close button if neither a title, subtitle, or children prop is passed to the Modal.Header subcomponent.

This should only be done with the first item in the modal body is an image or illustration. If the modal body begins with text, a bordered header with a title or subtitle should be used.

The following example shows a modal rendering an empty header, which displays only a close button in the upper right corner.

Expressive modal

Destructive confirmation

Free form modal

This example showcases the freedom and flexibility we have within Modal.Content