ModalDialog

Edit this page Leave feedback

A set of components for making all kinds of modal dialogs. Remember to supply the required title prop to ModalDialog in order ensure there is an accessible label for the dialog element.

Basic Usage

Show editable code example

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

() => {
  const [isOpen, open, close] = useToggle(false);
  const sizes = ['sm', 'md', 'lg', 'xl', 'fullscreen'];
  const variants = ['default', 'warning', 'danger', 'success', 'dark'];
  const [modalSize, setModalSize] = useState('md');
  const [modalVariant, setModalVariant] = useState('default');

  return (
    <>
      <div className="d-flex">
        <Button variant="outline-primary" onClick={open}>
          Open standard modal dialog
        </Button>
      </div>
      <ModalDialog
        title="My dialog"
        isOpen={isOpen}
        onClose={close}
        size={modalSize}
        variant={modalVariant}
        hasCloseButton
        isFullscreenOnMobile
        isOverflowVisible={false}
      >
        <ModalDialog.Header>
          <ModalDialog.Title>
            I'm a dialog box
          </ModalDialog.Title>
        </ModalDialog.Header>

        <ModalDialog.Body>
          <Form.Group>
            <Form.Label>Size</Form.Label>
            <Form.RadioSet
              name="size"
              value={modalSize}
              onChange={(e) => setModalSize(e.target.value)}
            >
              {sizes.map(s => <Form.Radio key={s} value={s}>{s}</Form.Radio>)}
            </Form.RadioSet>
          </Form.Group>
          <Form.Group>
            <Form.Label>Variant</Form.Label>
            <Form.RadioSet
              name="variant"
              value={modalVariant}
              onChange={(e) => setModalVariant(e.target.value)}
            >
              {variants.map(v => <Form.Radio key={v} value={v}>{v}</Form.Radio>)}
            </Form.RadioSet>
          </Form.Group>
          <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>
        </ModalDialog.Body>

        <ModalDialog.Footer>
          <ActionRow>
            <ModalDialog.CloseButton variant="tertiary">
              Cancel
            </ModalDialog.CloseButton>
            <Button>
              A button
            </Button>
          </ActionRow>
        </ModalDialog.Footer>
      </ModalDialog>
    </>
  )
}

() => {
  const [isOpen, open, close] = useToggle(false);
  const sizes = ['sm', 'md', 'lg', 'xl', 'fullscreen'];
  const variants = ['default', 'warning', 'danger', 'success', 'dark'];
  const [modalSize, setModalSize] = useState('md');
  const [modalVariant, setModalVariant] = useState('default');

  return (
    <>
      <div className="d-flex">
        <Button variant="outline-primary" onClick={open}>
          Open standard modal dialog
        </Button>
      </div>
      <ModalDialog
        title="My dialog"
        isOpen={isOpen}
        onClose={close}
        size={modalSize}
        variant={modalVariant}
        hasCloseButton
        isFullscreenOnMobile
        isOverflowVisible={false}
      >
        <ModalDialog.Header>
          <ModalDialog.Title>
            I'm a dialog box
          </ModalDialog.Title>
        </ModalDialog.Header>

        <ModalDialog.Body>
          <Form.Group>
            <Form.Label>Size</Form.Label>
            <Form.RadioSet
              name="size"
              value={modalSize}
              onChange={(e) => setModalSize(e.target.value)}
            >
              {sizes.map(s => <Form.Radio key={s} value={s}>{s}</Form.Radio>)}
            </Form.RadioSet>
          </Form.Group>
          <Form.Group>
            <Form.Label>Variant</Form.Label>
            <Form.RadioSet
              name="variant"
              value={modalVariant}
              onChange={(e) => setModalVariant(e.target.value)}
            >
              {variants.map(v => <Form.Radio key={v} value={v}>{v}</Form.Radio>)}
            </Form.RadioSet>
          </Form.Group>
          <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>
        </ModalDialog.Body>

        <ModalDialog.Footer>
          <ActionRow>
            <ModalDialog.CloseButton variant="tertiary">
              Cancel
            </ModalDialog.CloseButton>
            <Button>
              A button
            </Button>
          </ActionRow>
        </ModalDialog.Footer>
      </ModalDialog>
    </>
  )
}

With header content

Show editable code example

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

() => {
  const [isOpen, open, close] = useToggle(false);
  const sizes = ['sm', 'md', 'lg', 'xl', 'fullscreen'];
  const variants = ['default', 'warning', 'danger', 'success', 'dark'];
  const [modalSize, setModalSize] = useState('md');
  const [modalVariant, setModalVariant] = useState('dark');

  return (
    <>
      <div className="d-flex">
        <Button variant="outline-primary" onClick={open}>
          Open marketing modal dialog
        </Button>
      </div>
      <ModalDialog
        title="My dialog"
        isOpen={isOpen}
        onClose={close}
        size={modalSize}
        variant={modalVariant}
        hasCloseButton
        isOverflowVisible={false}
      >
        <ModalDialog.Hero>
          <ModalDialog.Hero.Background
            backgroundSrc="https://picsum.photos/1600/800/"
          />
          <ModalDialog.Hero.Content style={{ maxWidth: '15rem' }}>
            <ModalDialog.Title as="h1">
              I'm a dialog box
            </ModalDialog.Title>
          </ModalDialog.Hero.Content>
        </ModalDialog.Hero>

        <ModalDialog.Body>
          <Form.Group>
            <Form.Label>Size</Form.Label>
            <Form.RadioSet name="size" value={modalSize} onChange={(e) => setModalSize(e.target.value)}>
              {sizes.map(size => (
                <Form.Radio key={size} value={size}>{size}</Form.Radio>
              ))}
            </Form.RadioSet>
          </Form.Group>
          <Form.Group>
            <Form.Label>Variant</Form.Label>
            <Form.RadioSet name="variant" value={modalVariant} onChange={(e) => setModalVariant(e.target.value)}>
              {['default', 'dark'].map(variant => (
                <Form.Radio key={variant} value={variant}>{variant}</Form.Radio>
              ))}
            </Form.RadioSet>
          </Form.Group>
          <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>
        </ModalDialog.Body>

        <ModalDialog.Footer>
          <ActionRow isStacked>
            <ModalDialog.CloseButton variant="tertiary">
              Cancel
            </ModalDialog.CloseButton>
            <Button>
              A button
            </Button>
          </ActionRow>
        </ModalDialog.Footer>
      </ModalDialog>
    </>
  )
}

() => {
  const [isOpen, open, close] = useToggle(false);
  const sizes = ['sm', 'md', 'lg', 'xl', 'fullscreen'];
  const variants = ['default', 'warning', 'danger', 'success', 'dark'];
  const [modalSize, setModalSize] = useState('md');
  const [modalVariant, setModalVariant] = useState('dark');

  return (
    <>
      <div className="d-flex">
        <Button variant="outline-primary" onClick={open}>
          Open marketing modal dialog
        </Button>
      </div>
      <ModalDialog
        title="My dialog"
        isOpen={isOpen}
        onClose={close}
        size={modalSize}
        variant={modalVariant}
        hasCloseButton
        isOverflowVisible={false}
      >
        <ModalDialog.Hero>
          <ModalDialog.Hero.Background
            backgroundSrc="https://picsum.photos/1600/800/"
          />
          <ModalDialog.Hero.Content style={{ maxWidth: '15rem' }}>
            <ModalDialog.Title as="h1">
              I'm a dialog box
            </ModalDialog.Title>
          </ModalDialog.Hero.Content>
        </ModalDialog.Hero>

        <ModalDialog.Body>
          <Form.Group>
            <Form.Label>Size</Form.Label>
            <Form.RadioSet name="size" value={modalSize} onChange={(e) => setModalSize(e.target.value)}>
              {sizes.map(size => (
                <Form.Radio key={size} value={size}>{size}</Form.Radio>
              ))}
            </Form.RadioSet>
          </Form.Group>
          <Form.Group>
            <Form.Label>Variant</Form.Label>
            <Form.RadioSet name="variant" value={modalVariant} onChange={(e) => setModalVariant(e.target.value)}>
              {['default', 'dark'].map(variant => (
                <Form.Radio key={variant} value={variant}>{variant}</Form.Radio>
              ))}
            </Form.RadioSet>
          </Form.Group>
          <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>
        </ModalDialog.Body>

        <ModalDialog.Footer>
          <ActionRow isStacked>
            <ModalDialog.CloseButton variant="tertiary">
              Cancel
            </ModalDialog.CloseButton>
            <Button>
              A button
            </Button>
          </ActionRow>
        </ModalDialog.Footer>
      </ModalDialog>
    </>
  )
}

Overflow visibility handling

The isOverflowVisible toggle controls whether content that extends beyond the modal's viewport boundaries is visible. When enabled (isOverflowVisible is set to true), any overflow content, such as dropdowns or tooltips, will be displayed outside the modal's main area instead of being clipped.

In this example, switching isOverflowVisible on and off affects the visibility of the dropdown options in the autosuggest field, showing how overflow handling impacts content display within a modal.

Show editable code example

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

() => {
  const [isOpen, open, close] = useToggle(false);
  const [isOn, setOn, setOff, toggle] = useToggle(false);

  return (
    <>
      <div className="d-flex">
        <Button variant="outline-primary" onClick={open}>
          Open standard modal dialog
        </Button>
      </div>
      <ModalDialog
        title="My dialog"
        isOpen={isOpen}
        onClose={close}
        hasCloseButton
        isFullscreenOnMobile
        isOverflowVisible={isOn}
      >
        <ModalDialog.Header>
          <ModalDialog.Title>
            I'm a dialog box
          </ModalDialog.Title>
        </ModalDialog.Header>

        <ModalDialog.Body>
          <Stack className="mb-3" direction="horizontal" gap={2}>
            <Form.Switch checked={isOn} onChange={toggle}>
              isOverflowVisible
            </Form.Switch>
            {isOn
              ? <Badge variant="success">{JSON.stringify(isOn)}</Badge>
              : <Badge variant="light">{JSON.stringify(isOn)}</Badge>
            }
          </Stack>
          <Form.Autosuggest
            aria-label="form autosuggest"
            helpMessage="Select language"
            placeholder="Open autosuggest dropdown"
          >
            <Form.AutosuggestOption id="javascript-option-id">JavaScript</Form.AutosuggestOption>
            <Form.AutosuggestOption id="python-option-id">Python</Form.AutosuggestOption>
            <Form.AutosuggestOption id="ruby-option-id">Ruby</Form.AutosuggestOption>
            <Form.AutosuggestOption id="c-option-id">C</Form.AutosuggestOption>
          </Form.Autosuggest>
        </ModalDialog.Body>

        <ModalDialog.Footer>
          <ActionRow>
            <ModalDialog.CloseButton variant="tertiary">
              Cancel
            </ModalDialog.CloseButton>
            <Button>
              A button
            </Button>
          </ActionRow>
        </ModalDialog.Footer>
      </ModalDialog>
    </>
  )
}

() => {
  const [isOpen, open, close] = useToggle(false);
  const [isOn, setOn, setOff, toggle] = useToggle(false);

  return (
    <>
      <div className="d-flex">
        <Button variant="outline-primary" onClick={open}>
          Open standard modal dialog
        </Button>
      </div>
      <ModalDialog
        title="My dialog"
        isOpen={isOpen}
        onClose={close}
        hasCloseButton
        isFullscreenOnMobile
        isOverflowVisible={isOn}
      >
        <ModalDialog.Header>
          <ModalDialog.Title>
            I'm a dialog box
          </ModalDialog.Title>
        </ModalDialog.Header>

        <ModalDialog.Body>
          <Stack className="mb-3" direction="horizontal" gap={2}>
            <Form.Switch checked={isOn} onChange={toggle}>
              isOverflowVisible
            </Form.Switch>
            {isOn
              ? <Badge variant="success">{JSON.stringify(isOn)}</Badge>
              : <Badge variant="light">{JSON.stringify(isOn)}</Badge>
            }
          </Stack>
          <Form.Autosuggest
            aria-label="form autosuggest"
            helpMessage="Select language"
            placeholder="Open autosuggest dropdown"
          >
            <Form.AutosuggestOption id="javascript-option-id">JavaScript</Form.AutosuggestOption>
            <Form.AutosuggestOption id="python-option-id">Python</Form.AutosuggestOption>
            <Form.AutosuggestOption id="ruby-option-id">Ruby</Form.AutosuggestOption>
            <Form.AutosuggestOption id="c-option-id">C</Form.AutosuggestOption>
          </Form.Autosuggest>
        </ModalDialog.Body>

        <ModalDialog.Footer>
          <ActionRow>
            <ModalDialog.CloseButton variant="tertiary">
              Cancel
            </ModalDialog.CloseButton>
            <Button>
              A button
            </Button>
          </ActionRow>
        </ModalDialog.Footer>
      </ModalDialog>
    </>
  )
}

Theme Variables#

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

Props API#

ModalDialog Props API

children node Required
Specifies the content of the dialog
title string Required
The aria-label of the dialog
onClose func Required
A callback to close the modal dialog
isOpen bool
Is the modal dialog open or closed
Defaultfalse
hasCloseButton bool
The close 'x' icon button in the top right of the dialog box
Defaulttrue
size enum'sm' | 'md' | 'lg' | 'xl' | 'fullscreen'
Sizes determine the maximum width of the dialog box
Default'md'
variant enum'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
Default'Close'
className string
Specifies class name to append to the base element
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
isFullscreenOnMobile bool
To show full screen view on mobile screens
Defaultfalse
isBlocking bool
Prevent clicking on the backdrop or pressing Esc to close the modal
Defaultfalse
zIndex number
Specifies the z-index of the modal
isOverflowVisible bool 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.

ModalDialogTitle Props API

as elementType
Specifies the base element
Default'h2'
children node Required
Specifies the contents of the header
className string
Specifies class name to append to the base element

ModalDialogHeader Props API

as elementType
Specifies the base element
Default'div'
children node Required
Specifies the contents of the header
className string
Specifies class name to append to the base element

ModalDialogHero Props API

as elementType
Default'div'
children node Required
className string

ModalDialogBody Props API

as elementType
Specifies the base element
Default'div'
children node Required
Specifies the contents of the header
className string
Specifies class name to append to the base element

ModalDialogFooter Props API

as elementType
Specifies the base element
Default'div'
children node Required
Specifies the contents of the header
className string
Specifies class name to append to the base element

Usage Insights#

ModalDialog

Project Name	Paragon Version	Instance Count
frontend-app-account	22.10.0	4
frontend-app-admin-portal	21.13.1	25
frontend-app-authn	22.11.2	2
frontend-app-communications	22.7.0	1
frontend-app-course-authoring	22.8.1	19
ora_settings	22.8.1	1
proctoring	22.8.1	1
xpert_unit_summary	22.8.1	1
frontend-app-discussions	22.7.0	2
frontend-app-enterprise-public-catalog	21.13.1	2
frontend-app-gradebook	22.8.1	1
frontend-app-learner-dashboard	22.9.0	5
frontend-app-learner-portal-enterprise	21.13.1	3
frontend-app-learner-record	22.10.0	1
frontend-app-learning	22.10.0	4
frontend-app-library-authoring	21.11.3	3
frontend-app-payment	22.9.0	2
frontend-app-publisher	21.13.1	1
frontend-app-support-tools	21.13.1	16
frontend-lib-special-exams	22.7.0	1
prospectus	20.46.2	3

ModalDialogBody

Project Name	Paragon Version	Instance Count
frontend-app-account	22.10.0	4
frontend-app-admin-portal	21.13.1	25
frontend-app-authn	22.11.2	2
frontend-app-communications	22.7.0	1
frontend-app-course-authoring	22.8.1	19
ora_settings	22.8.1	1
proctoring	22.8.1	1
xpert_unit_summary	22.8.1	1
frontend-app-discussions	22.7.0	2
frontend-app-enterprise-public-catalog	21.13.1	2
frontend-app-gradebook	22.8.1	1
frontend-app-learner-dashboard	22.9.0	1
frontend-app-learner-portal-enterprise	21.13.1	3
frontend-app-learner-record	22.10.0	1
frontend-app-learning	22.10.0	2
frontend-app-library-authoring	21.11.3	2
frontend-app-payment	22.9.0	1
frontend-app-publisher	21.13.1	1
frontend-app-support-tools	21.13.1	16
frontend-lib-special-exams	22.7.0	1
prospectus	20.46.2	3

ModalDialogCloseButton

Project Name	Paragon Version	Instance Count
frontend-app-account	22.10.0	4
frontend-app-admin-portal	21.13.1	16
frontend-app-authn	22.11.2	1
frontend-app-communications	22.7.0	1
frontend-app-course-authoring	22.8.1	15
ora_settings	22.8.1	1
proctoring	22.8.1	1
xpert_unit_summary	22.8.1	1
frontend-app-discussions	22.7.0	2
frontend-app-gradebook	22.8.1	1
frontend-app-learner-record	22.10.0	1
frontend-app-learning	22.10.0	3
frontend-app-library-authoring	21.11.3	2
frontend-app-publisher	21.13.1	1
frontend-app-support-tools	21.13.1	16
prospectus	20.46.2	2

ModalDialogFooter

Project Name	Paragon Version	Instance Count
frontend-app-account	22.10.0	4
frontend-app-admin-portal	21.13.1	25
frontend-app-authn	22.11.2	2
frontend-app-communications	22.7.0	1
frontend-app-course-authoring	22.8.1	17
ora_settings	22.8.1	1
proctoring	22.8.1	1
xpert_unit_summary	22.8.1	1
frontend-app-discussions	22.7.0	2
frontend-app-enterprise-public-catalog	21.13.1	2
frontend-app-gradebook	22.8.1	1
frontend-app-learner-portal-enterprise	21.13.1	1
frontend-app-learner-record	22.10.0	1
frontend-app-learning	22.10.0	1
frontend-app-library-authoring	21.11.3	2
frontend-app-payment	22.9.0	1
frontend-app-publisher	21.13.1	1
frontend-app-support-tools	21.13.1	16
frontend-lib-special-exams	22.7.0	1
prospectus	20.46.2	2

ModalDialogHeader

Project Name	Paragon Version	Instance Count
frontend-app-account	22.10.0	4
frontend-app-admin-portal	21.13.1	24
frontend-app-authn	22.11.2	2
frontend-app-course-authoring	22.8.1	20
ora_settings	22.8.1	1
proctoring	22.8.1	1
xpert_unit_summary	22.8.1	1
frontend-app-discussions	22.7.0	2
frontend-app-learner-dashboard	22.9.0	2
frontend-app-learner-portal-enterprise	21.13.1	1
frontend-app-learner-record	22.10.0	1
frontend-app-learning	22.10.0	1
frontend-app-library-authoring	21.11.3	2
frontend-app-payment	22.9.0	1
frontend-app-publisher	21.13.1	1
frontend-app-support-tools	21.13.1	16
frontend-lib-special-exams	22.7.0	1
prospectus	20.46.2	2

ModalDialogHero

Project Name	Paragon Version	Instance Count
frontend-app-enterprise-public-catalog	21.13.1	2
frontend-app-learner-dashboard	22.9.0	1
frontend-app-learner-portal-enterprise	21.13.1	3
frontend-app-learning	22.10.0	1

ModalDialogTitle

Project Name	Paragon Version	Instance Count
frontend-app-account	22.10.0	4
frontend-app-admin-portal	21.13.1	24
frontend-app-authn	22.11.2	2
frontend-app-course-authoring	22.8.1	20
ora_settings	22.8.1	1
proctoring	22.8.1	1
xpert_unit_summary	22.8.1	1
frontend-app-discussions	22.7.0	2
frontend-app-enterprise-public-catalog	21.13.1	4
frontend-app-learner-portal-enterprise	21.13.1	2
frontend-app-learner-record	22.10.0	1
frontend-app-learning	22.10.0	2
frontend-app-library-authoring	21.11.3	2
frontend-app-payment	22.9.0	1
frontend-app-publisher	21.13.1	1
frontend-app-support-tools	21.13.1	15
frontend-lib-special-exams	22.7.0	1
prospectus	20.46.2	2

Edit this page Leave feedback

Paragon Design System

Theme

ModalDialog

Basic Usage

With header content

Overflow visibility handling

Theme Variables#

Props API#

Usage Insights#

ModalDialog

ModalDialogBody

ModalDialogCloseButton

ModalDialogFooter

ModalDialogHeader

ModalDialogHero

ModalDialogTitle

All components (A-Z)

Theme

ModalDialog

Basic Usage#

With header content#

Overflow visibility handling#

Theme Variables#

Props API#

Usage Insights#

ModalDialog

ModalDialogBody

ModalDialogCloseButton

ModalDialogFooter

ModalDialogHeader

ModalDialogHero

ModalDialogTitle

All components (A-Z)

Basic Usage

With header content

Overflow visibility handling