Components

Modal

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'

Properties

System props

System props apply standard sets of properties to a component that can be used to alter its appearance on the fly.

NameTypeDefaultDescriptionRequired?
appElementSelectorstring
section of app to aria hide for the modal
isOpenboolean
trigger to open or close the modal
labelstring
label for screen readers to announce the modal
headerReactNode
Element for the modal header. You probably want <Modal.Header />
footerReactNode
Content inside of <Modal.Footer />
childrenReactNode
body content of the modal
onClosesignature
callback for close
closeButtonLabelstring
aria-label for modal X
zIndexnumber6
Controls the z-index CSS property
widthstringnumber"800px"
The max width of the modal container

Subcomponents

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.
NameTypeDefaultDescriptionRequired?
titlestring
subtitlestring
childrenReactNode
Children are rendered to the left of the close button
NameTypeDefaultDescriptionRequired?
bgstring"neutral.0"
childrenReactNode

Recipes

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.