AlertModal

Alert Dialogs are used to block the user from moving forward in a particular workflow with a quick message that requires agreement before the action or next step can be taken. An example is providing a warning that settings may not be updated if the user has not chosen to save their changes.

This is the alert style ModalDialog composition. AlertModal 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.

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

      <AlertModal
        title="Heads up!"
        isOpen={isOpen}
        onClose={close}
        footerNode={(
          <ActionRow>
            <Button variant="tertiary" onClick={close}>Cancel</Button>
            <Button variant="danger">Submit</Button>
          </ActionRow>
        )}
      >
        <p>
          I'm baby palo santo ugh celiac fashion axe. La croix lo-fi venmo whatever.
        </p>
      </AlertModal>
    </>
  )
}

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

      <AlertModal
        title="Heads up!"
        isOpen={isOpen}
        onClose={close}
        footerNode={(
          <ActionRow>
            <Button variant="tertiary" onClick={close}>Cancel</Button>
            <Button variant="danger">Submit</Button>
          </ActionRow>
        )}
      >
        <p>
          I'm baby palo santo ugh celiac fashion axe. La croix lo-fi venmo whatever.
        </p>
      </AlertModal>
    </>
  )
}

Theme Variables (SCSS)#

// Modals

// Padding applied to the modal body
$modal-inner-padding:               1.5rem !default;
$modal-inner-padding-bottom:        .7rem !default;

// Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding
$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;

// Keep this for backwards compatibility
$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;

// Keep this for backwards compatibility
$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;

AlertModal Props API

children node Required
title string Required
The aria-label of the dialog
isOpen bool
Is the modal dialog open or closed
Defaultfalse
isBlocking bool
Prevent clicking on the backdrop to close the modal
Defaultfalse
hasCloseButton bool
Specifies whether the dialog box should contain 'x' icon button in the top right
Defaultfalse
onClose requiredWhenNot(PropTypes.func, 'isBlocking')
A callback to close the modal dialog
Default() => {}
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
footerNode node
Specifies what should be displayed in the footer of the dialog box
Defaultnull

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 to close the modal
Defaultfalse
zIndex number

Paragon Design System

AlertModal

Theme Variables (SCSS)#

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)