Theme

npm_versionnpm Paragon package page

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.

Basic usage

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

Variants

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

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

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

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#

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'

    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
  • icon elementType

    Icon that will be shown in the header of modal

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

    Specifies the z-index of the modal

  • isOverflowVisible bool

    Specifies whether overflow is visible in the modal

    Defaulttrue

Usage Insights#

AlertModal

Project NameParagon VersionInstance Count
frontend-app-account20.46.31
frontend-app-admin-portal20.46.311
frontend-app-communications20.46.21
frontend-app-course-authoring21.5.69
frontend-app-discussions20.46.31
frontend-app-ecommerce20.46.21
frontend-app-learner-portal-enterprise20.45.41
frontend-app-learning20.46.01
frontend-app-library-authoring21.5.61
frontend-app-ora-grading20.46.32
frontend-lib-content-components21.5.61

ModalDialog

Project NameParagon VersionInstance Count
frontend-app-account20.46.34
frontend-app-admin-portal20.46.315
frontend-app-authn20.46.22
frontend-app-communications20.46.21
frontend-app-course-authoring21.5.612
frontend-app-discussions20.46.32
frontend-app-enterprise-public-catalog20.46.32
frontend-app-gradebook20.45.01
frontend-app-learner-dashboard20.46.26
frontend-app-learner-portal-enterprise20.45.41
frontend-app-learner-record20.46.31
frontend-app-learning20.46.04
frontend-app-library-authoring21.5.63
frontend-app-payment20.46.22
frontend-app-publisher20.46.31
frontend-app-support-tools20.46.015
frontend-lib-content-components21.5.62
frontend-lib-special-exams20.44.01
prospectus20.46.23