StandardModal

Edit this page Leave feedback

The standard ModalDialog composition. StandardModal passes all of its props through to an underlying ModalDialog component providing some limited customization. If you have unique needs, use the ModalDialog compound component family directly.

Basic usage

Show editable code example

Any Paragon component or export may be added to the code example.

() => {
  const [isOpen, open, close] = useToggle(false);
  return (
    <>
      <Button variant="outline-primary" onClick={open}>Open standard modal</Button>

      <StandardModal
        title="This is a standard modal dialog"
        isOpen={isOpen}
        onClose={close}
        footerNode={(
          <ActionRow>
            <p className="small">
              <Hyperlink destination="#">Get help</Hyperlink>
            </p>
            <ActionRow.Spacer />
            <Button variant="tertiary" onClick={close}>Cancel</Button>
            <Button>Submit</Button>
          </ActionRow>
        )}
        isOverflowVisible={false}
      >
        <p>
          I'm baby palo santo ugh celiac fashion axe. La croix lo-fi venmo whatever. Beard man braid migas single-origin coffee forage ramps. Tumeric messenger bag bicycle rights wayfarers, try-hard cronut blue bottle health goth. Sriracha tumblr cardigan, cloud bread succulents tumeric copper mug marfa semiotics woke next level organic roof party +1 try-hard.
        </p>
      </StandardModal>
    </>
  )
}

() => {
  const [isOpen, open, close] = useToggle(false);
  return (
    <>
      <Button variant="outline-primary" onClick={open}>Open standard modal</Button>

      <StandardModal
        title="This is a standard modal dialog"
        isOpen={isOpen}
        onClose={close}
        footerNode={(
          <ActionRow>
            <p className="small">
              <Hyperlink destination="#">Get help</Hyperlink>
            </p>
            <ActionRow.Spacer />
            <Button variant="tertiary" onClick={close}>Cancel</Button>
            <Button>Submit</Button>
          </ActionRow>
        )}
        isOverflowVisible={false}
      >
        <p>
          I'm baby palo santo ugh celiac fashion axe. La croix lo-fi venmo whatever. Beard man braid migas single-origin coffee forage ramps. Tumeric messenger bag bicycle rights wayfarers, try-hard cronut blue bottle health goth. Sriracha tumblr cardigan, cloud bread succulents tumeric copper mug marfa semiotics woke next level organic roof party +1 try-hard.
        </p>
      </StandardModal>
    </>
  )
}

Theme Variables#

CSS Variable	Computed Value
‌	‌
‌	‌
‌	‌
‌	‌
‌	‌

Props API#

StandardModal Props API

children node Required
Specifies the content of the Modal
title string Required
The title for the Modal
onClose func Required
Optional callback function for when the modal it dismissed.
isOpen bool
Is the modal open or closed
Defaultfalse
hasCloseButton bool
The close 'x' icon button in the top right corner
Defaulttrue
size enum'sm' | 'md' | 'lg' | 'xl' | 'fullscreen'
The modal size
Default'md'
variant enum'default' | 'warning' | 'danger' | 'success' | 'dark'
The modal style variant to use
Default'default'
closeLabel string
Specifies the aria-label attribute for the close button
Default'Close'
className string
A class name to append to the modal
isFullscreenScroll bool
Determines where a scrollbar should appear if a modal is too large for the viewport. When false, the ModalDialog.Body receives a scrollbar, when true the browser window itself receives the scrollbar.
Defaultfalse
footerNode node
Specifies what should be displayed in the footer of the nodal
Defaultnull
beforeBodyNode node
Specifies what should be displayed before the body block
Defaultnull
afterBodyNode node
Specifies what should be displayed after the body block
Defaultnull

ModalDialog Props API

children React.ReactNode Required
Specifies the content of the dialog
title string Required
The aria-label of the dialog
onClose () => void Required
A callback to close the modal dialog, e.g. when Escape is pressed
isOpen boolean
Is the modal dialog open or closed?
Defaultfalse
hasCloseButton boolean
The close 'x' icon button in the top right of the dialog box
Defaulttrue
size 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen'
Size determines the maximum width of the dialog box
Default'md'
variant 'default' | 'warning' | 'danger' | 'success' | 'dark'
The visual style of the dialog box
Default'default'
closeLabel string
The label supplied to the close icon button if one is rendered
className string
Specifies class name to append to the base element
isFullscreenScroll boolean
Determines where a scrollbar should appear if a modal is too large for the viewport. When false, the ModalDialog. Body receives a scrollbar, when true the browser window itself receives the scrollbar.
Defaultfalse
isFullscreenOnMobile boolean
To show full screen view on mobile screens
Defaultfalse
isBlocking boolean
Prevent clicking on the backdrop or pressing Esc to close the modal
Defaultfalse
zIndex number
Specifies the z-index of the modal
isOverflowVisible boolean Required
Specifies whether overflow content inside the modal should be visible.
- true - content that exceeds the modal boundaries will remain visible outside the modal's main viewport, rather than being clipped or hidden.
- false - any overflow content will be clipped to fit within the modal's dimensions.

Usage Insights#

ModalDialog

Project Name	Paragon Version	Instance Count
frontend-app-account	23.14.8	4
frontend-app-admin-portal	22.20.3	29
frontend-app-communications	23.14.2	1
frontend-app-course-authoring	23.15.1	19
ora_settings	23.15.1	1
proctoring	23.15.1	1
frontend-app-discussions	23.14.2	2
frontend-app-enterprise-public-catalog	22.20.5	2
frontend-app-gradebook	23.4.5	1
frontend-app-discussions	23.14.9	9
frontend-app-learner-portal-enterprise	22.17.0	3
frontend-app-learner-record	23.14.9	1
frontend-app-gradebook	23.4.5	2
frontend-app-library-authoring	21.11.3	3
frontend-app-support-tools	23.4.2	16
frontend-lib-special-exams	23.4.2	1

StandardModal

Project Name	Paragon Version	Instance Count
frontend-app-course-authoring	23.15.1	2
frontend-app-learner-portal-enterprise	22.17.0	9
frontend-app-learner-record	23.14.9	2
frontend-app-gradebook	23.4.5	1
frontend-app-support-tools	23.4.2	2

Edit this page Leave feedback

Paragon Design System

StandardModal

Basic usage

Theme Variables#

Props API#

Usage Insights#

ModalDialog

StandardModal

All components (A-Z)

StandardModal

Basic usage#

Theme Variables#

Props API#

Usage Insights#

ModalDialog

StandardModal

All components (A-Z)

Basic usage