Components

Modal

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'

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
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.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.

Assign Chatbot

The chatbot will respond to customers from this profile.

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:

Custom header

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.

NameTypeDefaultDescriptionRequired?
titlestring
subtitlestring
childrenReactNode
Children are rendered to the left of the close button
borderedboolean

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.

Recipes

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