Theme

npm_versionnpm Paragon package page

The Alert component displays a short, important message in a way that attracts the user's attention. Alerts offer four severity levels that set a distinctive icon and color:

  • Info: used to convey general information or actions that aren't critical, note that info variant should not contain any icons in it
  • Warning: used to display information that needs attention
  • Success: used for success messages
  • Danger: used to communicate problems that have to be resolved immediately

This component utilizes and extends the Alert component from react-bootstrap.
See React-Bootstrap for additional documentation.

Basic Usage

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

With Action Buttons

The Alert component supports a dismissible button and a custom call-to-action button, via the dismissible and button props respectively. The buttons may be right aligned or stacked. On extra small screen widths, the buttons will be stacked.

The stacked variant should be used for:

  • Placement in sidebars or small container
  • Extra-small breakpoint and below

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.

Kitchen Sink

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

Theme Variables (SCSS)#

$alert-padding-y: 1.5rem !default;
$alert-padding-x: 1.5rem !default;
$alert-margin-bottom: 1rem !default;
$alert-border-radius: $border-radius !default;
$alert-link-font-weight: $font-weight-normal !default;
$alert-border-width: 0 !default;
$alert-title-color: #000000 !default;
$alert-box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .15) !default;
$alert-bg-level: -10 !default;
$alert-border-level: -9 !default;
$alert-color-level: 6 !default;
$alert-icon-space: .8rem !default;
$alert-font-size: .875rem !default;
$alert-line-height: 1.5rem !default;
$alert-content-color: $gray-700 !default;
$alert-actions-gap: map-get($spacers, 3);

Props API#

Alert Props API
  • className string

    Specifies class name to append to the base element

  • bsPrefix string

    Overrides underlying component base CSS class name

  • variant enum'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light'

    Specifies variant to use.

  • transition bool | shape {
    in: bool,
    appear: bool,
    children: node,
    onEnter: func,
    onEntered: func,
    onEntering: func,
    onExit: func,
    onExited: func,
    onExiting: func,
    }

    Animate the entering and exiting of the Alert. true will use the <Fade> transition, more detailed customization is also provided.

  • children node

    Docstring for the children prop

  • icon func

    Docstring for the icon prop... Icon that will be shown in the alert

  • show bool

    Whether the alert is shown.

    Defaulttrue
  • dismissible bool

    Whether the alert is dismissible. Defaults to true.

    Defaultfalse
  • onClose func

    Optional callback function for when the alert it dismissed.

    Default() => {}
  • actions element[]

    Optional list of action elements. May include, at most, 2 actions, or 1 if dismissible is true.

  • stacked bool

    Position of the dismiss and call-to-action buttons. Defaults to false.

    Defaultfalse
  • closeLabel string | element

    Sets the text for alert close button, defaults to 'Dismiss'.

AlertHeading Props API
  • as elementType

    Specifies the base element

    DefaultdivWithClassName('h4')
  • bsPrefix string

    Overrides underlying component base CSS class name

    Default'alert-heading'

Usage Insights#

Alert

Project NameParagon VersionInstance Count
edx-ora221.8.02
frontend-app-account22.0.08
frontend-app-admin-portal21.13.170
frontend-app-authn22.6.09
frontend-app-communications22.0.03
frontend-app-course-authoring22.4.031
proctoring22.4.03
xpert_unit_summary22.4.01
frontend-app-discussions22.1.13
frontend-app-ecommerce20.46.32
frontend-app-enterprise-public-catalog21.13.12
frontend-app-gradebook22.1.15
frontend-app-learner-dashboard22.4.02
frontend-app-learner-portal-enterprise21.13.122
frontend-app-learner-portal-programs20.46.35
frontend-app-learner-record22.6.05
frontend-app-learning22.3.024
frontend-app-library-authoring21.11.37
frontend-app-ora-grading21.11.35
frontend-app-payment22.1.11
frontend-app-profile22.3.13
frontend-app-program-console20.46.25
frontend-app-publisher20.46.325
frontend-app-support-tools20.46.018
frontend-lib-content-components22.0.05
frontend-lib-special-exams22.2.04
prospectus20.46.23

AlertHeading

Project NameParagon VersionInstance Count
frontend-app-account22.0.02
frontend-app-admin-portal21.13.150
frontend-app-authn22.6.08
frontend-app-communications22.0.01
frontend-app-course-authoring22.4.010
xpert_unit_summary22.4.01
frontend-app-ecommerce20.46.32
frontend-app-enterprise-public-catalog21.13.11
frontend-app-learner-portal-enterprise21.13.19
frontend-app-learner-record22.6.02
frontend-app-learning22.3.03
frontend-app-library-authoring21.11.31
frontend-app-ora-grading21.11.34
frontend-app-profile22.3.11
frontend-app-publisher20.46.34
frontend-app-support-tools20.46.02
frontend-lib-content-components22.0.02
frontend-lib-special-exams22.2.02
prospectus20.46.21

AlertLink

Project NameParagon VersionInstance Count
frontend-app-account22.0.01
frontend-app-authn22.6.04
frontend-app-course-authoring22.4.06
proctoring22.4.04
frontend-app-enterprise-public-catalog21.13.11
frontend-app-learner-portal-enterprise21.13.12
frontend-app-learner-portal-programs20.46.31
frontend-app-profile22.3.11
frontend-lib-special-exams22.2.03