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

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
Default''

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

ModalDialogBody

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
xpert_unit_summary	23.15.1	1
frontend-app-discussions	23.14.2	3
frontend-app-enterprise-public-catalog	22.20.5	2
frontend-app-discussions	23.14.9	1
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

ModalDialogCloseButton

Project Name	Paragon Version	Instance Count
frontend-app-account	23.14.8	4
frontend-app-admin-portal	22.20.3	19
frontend-app-communications	23.14.2	1
frontend-app-course-authoring	23.15.1	15
ora_settings	23.15.1	1
proctoring	23.15.1	1
frontend-app-discussions	23.14.2	2
frontend-app-gradebook	23.4.5	1
frontend-app-learner-portal-programs	22.20.6	4
frontend-app-learner-record	23.14.9	1
frontend-app-gradebook	23.4.5	3
frontend-app-support-tools	23.4.2	16

ModalDialogFooter

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	17
ora_settings	23.15.1	1
xpert_unit_summary	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-learner-portal-enterprise	22.17.0	1
frontend-app-learner-record	23.14.9	1
frontend-app-support-tools	23.4.2	16
frontend-lib-special-exams	23.4.2	1

ModalDialogHeader

Project Name	Paragon Version	Instance Count
frontend-app-account	23.14.8	4
frontend-app-admin-portal	22.20.3	28
frontend-app-course-authoring	23.15.1	20
ora_settings	23.15.1	1
proctoring	23.15.1	1
xpert_unit_summary	23.15.1	1
frontend-app-discussions	23.14.2	2
frontend-app-discussions	23.14.9	2
frontend-app-learner-portal-enterprise	22.17.0	1
frontend-app-learner-record	23.14.9	1
frontend-app-gradebook	23.4.5	1
frontend-app-library-authoring	21.11.3	1
frontend-app-support-tools	23.4.2	16
frontend-lib-special-exams	23.4.2	1

ModalDialogHero

Project Name	Paragon Version	Instance Count
frontend-app-discussions	23.14.2	1
frontend-app-enterprise-public-catalog	22.20.5	2
frontend-app-gradebook	23.4.5	1
frontend-app-library-authoring	21.11.3	3
frontend-app-support-tools	23.4.2	1

ModalDialogTitle

Project Name	Paragon Version	Instance Count
frontend-app-account	23.14.8	4
frontend-app-admin-portal	22.20.3	28
frontend-app-course-authoring	23.15.1	20
ora_settings	23.15.1	1
frontend-app-discussions	23.14.2	2
frontend-app-enterprise-public-catalog	22.20.5	4
frontend-app-gradebook	23.4.5	1
frontend-app-learner-portal-programs	22.20.6	5
frontend-app-learner-record	23.14.9	1
frontend-app-gradebook	23.4.5	2
frontend-app-support-tools	23.4.2	15
frontend-lib-special-exams	23.4.2	1

Edit this page Leave feedback

Paragon Design System

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)

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