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#

CSS VariableComputed Value










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 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light'

    Specifies variant to use.

  • transition boolean | TransitionComponent

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

  • children ReactNode
  • icon React.ComponentType<IconProps>

    Icon that will be shown in the alert

  • show boolean

    Whether the alert is shown.

    Defaulttrue
  • dismissible boolean

    Whether the alert is dismissible. Defaults to false.

    Defaultfalse
  • onClose () => void

    Optional callback function for when the alert it dismissed.

    Default() => {}
  • actions React.ReactElement[]

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

  • stacked boolean

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

    Defaultfalse
  • closeLabel string | ReactNode

    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'
  • children ReactNode

Usage Insights#

Alert

Project NameParagon VersionInstance Count
edx-ora221.13.12
frontend-app-account23.14.08
frontend-app-admin-portal22.18.071
frontend-app-communications23.12.23
frontend-app-course-authoring23.14.033
ora_settings23.14.01
proctoring23.14.03
xpert_unit_summary23.14.01
frontend-app-discussions23.4.53
frontend-app-ecommerce20.46.32
frontend-app-enterprise-public-catalog22.17.02
frontend-app-gradebook23.4.53
frontend-app-learner-portal-enterprise22.17.022
frontend-app-learner-portal-programs22.20.21
frontend-app-learner-record23.14.06
frontend-app-gradebook23.4.58
frontend-app-learner-record23.4.56
frontend-app-profile23.14.12
frontend-app-program-console21.13.12
frontend-app-publisher23.6.127
frontend-app-support-tools23.4.218
frontend-lib-special-exams23.4.24

AlertHeading

Project NameParagon VersionInstance Count
frontend-app-account23.14.02
frontend-app-admin-portal22.18.051
frontend-app-authn23.14.034
frontend-app-communications23.12.21
frontend-app-course-authoring23.14.011
ora_settings23.14.01
xpert_unit_summary23.14.01
frontend-app-ecommerce20.46.32
frontend-app-enterprise-public-catalog22.17.01
frontend-app-learner-portal-enterprise22.17.09
frontend-app-learner-record23.14.03
frontend-app-learning23.4.53
frontend-app-publisher23.6.17
frontend-app-support-tools23.4.22
frontend-lib-special-exams23.4.22

AlertLink

Project NameParagon VersionInstance Count
frontend-app-account23.14.01
frontend-app-course-authoring23.14.08
proctoring23.14.05
frontend-app-enterprise-public-catalog22.17.01
frontend-app-gradebook23.4.55
frontend-app-learner-portal-enterprise22.17.02
frontend-lib-special-exams23.4.23