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#
- 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
DefaulttrueWhether the alert is shown.
- dismissible
bool
DefaultfalseWhether the alert is dismissible. Defaults to true.
- onClose
func
Default() => {}Optional callback function for when the alert it dismissed.
- actions
element
[]
Optional list of action elements. May include, at most, 2 actions, or 1 if dismissible is true.
- stacked
bool
DefaultfalsePosition of the dismiss and call-to-action buttons. Defaults to
false
. - closeLabel
string
|element
Sets the text for alert close button, defaults to 'Dismiss'.
- as
elementType
DefaultdivWithClassName('h4')Specifies the base element
- bsPrefix
string
Default'alert-heading'Overrides underlying component base CSS class name
- as
elementType
Default'a'Specifies the base element
- bsPrefix
string
Default'alert-link'Overrides underlying component base CSS class name
Usage Insights#
Alert
Project Name | Paragon Version | Instance Count | |
---|---|---|---|
edx-ora2 | 21.8.0 | 2 | |
frontend-app-account | 22.0.0 | 8 | |
frontend-app-admin-portal | 21.13.1 | 71 | |
frontend-app-authn | 22.8.1 | 9 | |
frontend-app-communications | 22.7.0 | 3 | |
frontend-app-course-authoring | 22.8.1 | 33 | |
ora_settings | 22.8.1 | 1 | |
proctoring | 22.8.1 | 3 | |
xpert_unit_summary | 22.8.1 | 1 | |
frontend-app-discussions | 22.7.0 | 3 | |
frontend-app-ecommerce | 20.46.3 | 2 | |
frontend-app-enterprise-public-catalog | 21.13.1 | 2 | |
frontend-app-gradebook | 22.8.1 | 5 | |
frontend-app-learner-dashboard | 22.8.1 | 2 | |
frontend-app-learner-portal-enterprise | 21.13.1 | 22 | |
frontend-app-learner-portal-programs | 21.13.1 | 5 | |
frontend-app-learner-record | 22.8.1 | 5 | |
frontend-app-learning | 22.8.1 | 24 | |
frontend-app-library-authoring | 21.11.3 | 7 | |
frontend-app-ora-grading | 21.11.3 | 5 | |
frontend-app-payment | 22.8.1 | 1 | |
frontend-app-profile | 22.8.1 | 3 | |
frontend-app-program-console | 21.13.1 | 5 | |
frontend-app-publisher | 21.13.1 | 25 | |
frontend-app-support-tools | 21.13.1 | 18 | |
frontend-lib-special-exams | 22.7.0 | 4 | |
prospectus | 20.46.2 | 3 |
AlertHeading
Project Name | Paragon Version | Instance Count | |
---|---|---|---|
frontend-app-account | 22.0.0 | 2 | |
frontend-app-admin-portal | 21.13.1 | 50 | |
frontend-app-authn | 22.8.1 | 8 | |
frontend-app-communications | 22.7.0 | 1 | |
frontend-app-course-authoring | 22.8.1 | 12 | |
ora_settings | 22.8.1 | 1 | |
xpert_unit_summary | 22.8.1 | 1 | |
frontend-app-ecommerce | 20.46.3 | 2 | |
frontend-app-enterprise-public-catalog | 21.13.1 | 1 | |
frontend-app-learner-portal-enterprise | 21.13.1 | 9 | |
frontend-app-learner-record | 22.8.1 | 2 | |
frontend-app-learning | 22.8.1 | 3 | |
frontend-app-library-authoring | 21.11.3 | 1 | |
frontend-app-ora-grading | 21.11.3 | 4 | |
frontend-app-profile | 22.8.1 | 1 | |
frontend-app-publisher | 21.13.1 | 4 | |
frontend-app-support-tools | 21.13.1 | 2 | |
frontend-lib-special-exams | 22.7.0 | 2 | |
prospectus | 20.46.2 | 1 |
AlertLink
Project Name | Paragon Version | Instance Count | |
---|---|---|---|
frontend-app-account | 22.0.0 | 1 | |
frontend-app-authn | 22.8.1 | 4 | |
frontend-app-course-authoring | 22.8.1 | 7 | |
proctoring | 22.8.1 | 5 | |
frontend-app-enterprise-public-catalog | 21.13.1 | 1 | |
frontend-app-learner-portal-enterprise | 21.13.1 | 2 | |
frontend-app-learner-portal-programs | 21.13.1 | 1 | |
frontend-app-profile | 22.8.1 | 1 | |
frontend-lib-special-exams | 22.7.0 | 3 |