Skip to main content

Pivotal UI

v19.1.2

Modal

The Modal component provides a way to put content in a pop-up dialog that must be closed before interacting with the main content again.

Basic example with custom size and duration
ReferenceError: React is not defined

Props

PropertyRequiredTypeDefaultDescription
animationDurationnoNumber300Animation duration in milliseconds (Set to <= 0 to disable animations)
animationEasingnoStringcubic-bezier(0.25, 0.46, 0.45, 0.94)Animation easing function
dialogClassNamenoStringClass(es) to apply to the modal dialog
onHideyesFunctionCallback that fires as soon as the modal begins closing
shownoBooleanWhether the modal should be opened or closed
sizenoString, oneOf(['sm', 'small', 'large', 'lg']) or a valid css width value, eg. '44%', '900px'Size variations
titlenoNodeTitle of the modal, shown at the top of the modal

Imports

Import React components (including CSS):

import {Modal} from 'pivotal-ui/react/modal';

Import CSS only:

import 'pivotal-ui/css/modal';