Modal is used to overlay content on top of the 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'



The Modal component has two subcomponent that are used to handle headers and footers within the modal itself.

The Modal.Header component provides a close icon in the upper right-hand corner of the modal, a title and subtitle for the modal, and has space for rendering arbitrary content.

The following example shows a Modal Header with a title, subtitle, and children, all of which are optional. If you provide children, they will be rendered in the space between the title/subtitle and the close icon.

Assign Chatbot

The chatbot will respond to customers from this profile.
Children inserted here.


Modal with no header
If you do not provide a header component, or provide a header component without a title or subtitle, the header will render without a bottom border and the close icon only.

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.