Modal
Example Usage
Any Paragon component or export may be added to the code example.
configurable buttons
<Modalopentitle="Modal title."body="Modal body."buttons={[<Button variant="primary">Blue button!</Button>,{label: 'Red button!',buttonType: 'danger',},<Button variant="success">Green button!</Button>,]}onClose={() => {}}/>
configurable title and body
<Modalopentitle="Custom title!"body="Custom body!"buttons={[<Button variant="dark">Dark button!</Button>]}onClose={() => {}}/>
configurable buttons that perform actions
<Modalopentitle="Modal title."body="Modal body."buttons={[<Buttonvariant="light"onClick={action('button-click')}>Click me and check the console!</Button>,]}onClose={() => {}}/>
configurable close button string
<Modalopentitle="Modal title."body="Modal body."closeText="SHOO!"onClose={() => {}}/>
configurable close button element
<Modalopentitle="Modal title."body="Modal body."closeText={<IconclassName="fa fa-ship"screenReaderText="Close"/>}onClose={() => {}}/>
Theme Variables (SCSS)#
$modal-inner-padding: 1.5rem !default;$modal-inner-padding-bottom: .7rem !default;$modal-footer-margin-between: .5rem !default;$modal-dialog-margin: 1.5rem !default;$modal-dialog-margin-y-sm-up: 1.75rem !default;$modal-title-line-height: $line-height-base !default;$modal-content-color: null !default;$modal-content-bg: $white !default;$modal-content-border-color: rgba($black, .2) !default;$modal-content-border-width: 0 !default;$modal-content-border-radius: $border-radius-lg !default;$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default;$modal-content-box-shadow-sm-up: 0 10px 20px rgba($black, .15), 0 8px 20px rgba($black, .15) !default;$modal-backdrop-bg: $black !default;$modal-backdrop-opacity: .5 !default;$modal-header-border-color: $border-color !default;$modal-footer-border-color: $modal-header-border-color !default;$modal-header-border-width: $modal-content-border-width !default;$modal-footer-border-width: $modal-header-border-width !default;$modal-header-padding-y: 1rem !default;$modal-header-padding-x: 1.5rem !default;$modal-close-container-top: .625rem !default;$modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default;$modal-footer-padding-y: 1rem !default;$modal-footer-padding-x: 1.5rem !default;$modal-footer-padding: $modal-footer-padding-y $modal-footer-padding-x !default;$modal-xl: 1140px !default;$modal-lg: 800px !default;$modal-md: 500px !default;$modal-sm: 400px !default;$modal-fade-transform: translate(0, -50px) !default;$modal-show-transform: none !default;$modal-transition: transform .3s ease-out !default;$modal-scale-transform: scale(1.02) !default;
Props API#
- open
bool
Defaultfalsespecifies whether the modal renders open or closed on the initial render. It defaults to false.
- parentSelector
string
Default'body'is the selector for an element in the dom which the modal should be rendered under. It uses querySelector to find the first element that matches that selector, and then creates a react portal to a div underneath the parent element.
- title
string
|element
Requireda string or an element that is rendered inside of the modal title, above the modal body.
- body
string
|element
Requireda string or an element that is rendered inside of the modal body, between the title and the footer.
- buttons
element
|shape
{}[]
Default[]an array of either elements or shapes that take the form of the buttonPropTypes. See the buttonPropTypes for a list of acceptable props to pass as part of a button.
- closeText
string
|element
Default'Close'specifies the display text of the default Close button. It defaults to "Close".
- onClose
func
Requireda function that is called on close. It can be used to perform actions upon closing of the modal, such as restoring focus to the previous logical focusable element.
- variantDefault{}
shape
{status:}string
, - renderDefaultCloseButton
bool
Defaulttruespecifies whether the default close button is rendered in the footer. It defaults to true.
- renderHeaderCloseButton
bool
Defaulttruespecifies whether a close button is rendered in the modal header. It defaults to true.
- dialogClassName
string
Specifies optional classes to add to the element with the '.modal-dialog' class. See Bootstrap documentation for possible classes. Some options: modal-lg, modal-sm, modal-dialog-centered
Usage Insights#
Modal
Project Name | Paragon Version | Instance Count | |
---|---|---|---|
credentials | 19.19.1 | 2 | |
frontend-app-admin-portal | 20.26.3 | 4 | |
frontend-app-communications | 20.28.5 | 1 | |
frontend-app-learner-portal-enterprise | 20.31.1 | 7 | |
frontend-app-learner-portal-programs | 20.28.4 | 1 | |
frontend-app-learning | 20.28.4 | 1 | |
frontend-learner-portal-base | 12.2.0 | 2 | |
prospectus | 20.28.3 | 1 | |
studio-frontend | 3.4.8 | 5 |