Alert

Edit this page Leave feedback

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

Show editable code example

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

<>
<Alert variant="success">
  This is a "success" alert with{' '}
  <Alert.Link href="#">an example link</Alert.Link>. Give it a click if you
  like.
</Alert>
<Alert variant="info">
  This is a "info" alert with{' '}
  <Alert.Link href="#">an example link</Alert.Link>. Give it a click if you
  like.
</Alert>
<Alert variant="danger">
  This is a "danger" alert with{' '}
  <Alert.Link href="#">an example link</Alert.Link>. Give it a click if you
  like.
</Alert>
<Alert variant="warning">
  This is a "warning" alert with{' '}
  <Alert.Link href="#">an example link</Alert.Link>. Give it a click if you
  like.
</Alert>
</>

<>
<Alert variant="success">
  This is a "success" alert with{' '}
  <Alert.Link href="#">an example link</Alert.Link>. Give it a click if you
  like.
</Alert>
<Alert variant="info">
  This is a "info" alert with{' '}
  <Alert.Link href="#">an example link</Alert.Link>. Give it a click if you
  like.
</Alert>
<Alert variant="danger">
  This is a "danger" alert with{' '}
  <Alert.Link href="#">an example link</Alert.Link>. Give it a click if you
  like.
</Alert>
<Alert variant="warning">
  This is a "warning" alert with{' '}
  <Alert.Link href="#">an example link</Alert.Link>. Give it a click if you
  like.
</Alert>
</>

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

Show editable code example

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

<>
  <Alert
    variant="info"
    actions={[
      <Button>Hello</Button>,
    ]}
    dismissible
    closeLabel="Dismiss"
    onClose={(e) => { console.log('closed', e); } }
  >
    This is a "info" alert with{' '}
    <Alert.Link href="#">an example link</Alert.Link>. Give it a click if you
    like.
  </Alert>
  <Alert variant="warning" dismissible>
    This is a "info" alert with{' '}
    <Alert.Link href="#">an example link</Alert.Link>. Give it a click if you
    like.
  </Alert>
  <Alert
    variant="success"
    icon={CheckCircle}
    dismissible
    actions={[
      <Button>Hello</Button>,
    ]}
  >
    <Alert.Heading>Hey, nice to see you</Alert.Heading>
    <p>
      Aww yeah, you successfully read this important alert message. This example
      text is going to run a bit longer so that you can see how spacing within an
      alert works with this kind of content.
    </p>
  </Alert>
  <Alert
    variant="danger"
    icon={Info}
    actions={[
      <Button>Hello</Button>,
    ]}
    dismissible
    onClose={(e) => { console.log('closed', e); } }
    stacked
  >
    <Alert.Heading>Hey, nice to see you</Alert.Heading>
    <p>
      Aww yeah, you successfully read this important alert message. This example
      text is going to run a bit longer so that you can see how spacing within an
      alert works with this kind of content.
    </p>
  </Alert>
</>

<>
  <Alert
    variant="info"
    actions={[
      <Button>Hello</Button>,
    ]}
    dismissible
    closeLabel="Dismiss"
    onClose={(e) => { console.log('closed', e); } }
  >
    This is a "info" alert with{' '}
    <Alert.Link href="#">an example link</Alert.Link>. Give it a click if you
    like.
  </Alert>
  <Alert variant="warning" dismissible>
    This is a "info" alert with{' '}
    <Alert.Link href="#">an example link</Alert.Link>. Give it a click if you
    like.
  </Alert>
  <Alert
    variant="success"
    icon={CheckCircle}
    dismissible
    actions={[
      <Button>Hello</Button>,
    ]}
  >
    <Alert.Heading>Hey, nice to see you</Alert.Heading>
    <p>
      Aww yeah, you successfully read this important alert message. This example
      text is going to run a bit longer so that you can see how spacing within an
      alert works with this kind of content.
    </p>
  </Alert>
  <Alert
    variant="danger"
    icon={Info}
    actions={[
      <Button>Hello</Button>,
    ]}
    dismissible
    onClose={(e) => { console.log('closed', e); } }
    stacked
  >
    <Alert.Heading>Hey, nice to see you</Alert.Heading>
    <p>
      Aww yeah, you successfully read this important alert message. This example
      text is going to run a bit longer so that you can see how spacing within an
      alert works with this kind of content.
    </p>
  </Alert>
</>

Variants

Show editable code example

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

<>
<Alert variant="success" dismissible icon={CheckCircle}>
  <Alert.Heading>Hey, nice to see you</Alert.Heading>
  <p>
    Aww yeah, you successfully read this important alert message. This example
    text is going to run a bit longer so that you can see how spacing within an
    alert works with this kind of content.
  </p>
</Alert>
<Alert variant="warning" dismissible icon={WarningFilled}>
  <Alert.Heading>Hey, nice to see you</Alert.Heading>
  <p>
    Aww yeah, you successfully read this important alert message. This example
    text is going to run a bit longer so that you can see how spacing within an
    alert works with this kind of content.
  </p>
</Alert>
<Alert variant="danger" dismissible icon={Info}>
  <Alert.Heading>Hey, nice to see you</Alert.Heading>
  <p>
    Aww yeah, you successfully read this important alert message. This example
    text is going to run a bit longer so that you can see how spacing within an
    alert works with this kind of content.
  </p>
</Alert>
</>

<>
<Alert variant="success" dismissible icon={CheckCircle}>
  <Alert.Heading>Hey, nice to see you</Alert.Heading>
  <p>
    Aww yeah, you successfully read this important alert message. This example
    text is going to run a bit longer so that you can see how spacing within an
    alert works with this kind of content.
  </p>
</Alert>
<Alert variant="warning" dismissible icon={WarningFilled}>
  <Alert.Heading>Hey, nice to see you</Alert.Heading>
  <p>
    Aww yeah, you successfully read this important alert message. This example
    text is going to run a bit longer so that you can see how spacing within an
    alert works with this kind of content.
  </p>
</Alert>
<Alert variant="danger" dismissible icon={Info}>
  <Alert.Heading>Hey, nice to see you</Alert.Heading>
  <p>
    Aww yeah, you successfully read this important alert message. This example
    text is going to run a bit longer so that you can see how spacing within an
    alert works with this kind of content.
  </p>
</Alert>
</>

Kitchen Sink

Show editable code example

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

<Alert
  variant="success"
  actions={[
    <Button>Hello</Button>
  ]}
  dismissible
  stacked
>
  <Alert.Heading>Hey, nice to see you</Alert.Heading>
  <p>
    Aww yeah, you successfully read this important alert message. This example
    text is going to run a bit longer so that you can see how spacing within an
    alert works with this kind of content.
  </p>
  <hr />
  <p className="mb-0">
    Whenever you need to, be sure to use margin utilities to keep things nice
    and tidy.
  </p>
</Alert>

<Alert
  variant="success"
  actions={[
    <Button>Hello</Button>
  ]}
  dismissible
  stacked
>
  <Alert.Heading>Hey, nice to see you</Alert.Heading>
  <p>
    Aww yeah, you successfully read this important alert message. This example
    text is going to run a bit longer so that you can see how spacing within an
    alert works with this kind of content.
  </p>
  <hr />
  <p className="mb-0">
    Whenever you need to, be sure to use margin utilities to keep things nice
    and tidy.
  </p>
</Alert>

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 PropTypes.oneOfType([ PropTypes.bool, PropTypes.shape({ in: PropTypes.bool, appear: PropTypes.bool, children: PropTypes.node, onEnter: PropTypes.func, onEntered: PropTypes.func, onEntering: PropTypes.func, onExit: PropTypes.func, onExited: PropTypes.func, onExiting: PropTypes.func, }), ]) as PropTypes.Validator<BaseAlertProps['transition']>
Animate the entering and exiting of the Alert. true will use the <Fade> transition, more detailed customization is also provided.
children PropTypes.node as PropTypes.Validator<ReactNode>
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 PropTypes.arrayOf(PropTypes.element) as PropTypes.Validator<React.ReactElement[]>
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 PropTypes.elementType as PropTypes.Validator<ElementType>
Specifies the base element
DefaultdivWithClassName('h4')
bsPrefix string
Overrides underlying component base CSS class name
Default'alert-heading'
children unknown type

AlertLink Props API

as PropTypes.elementType as PropTypes.Validator<ElementType>
Specifies the base element
Default'a'
bsPrefix string
Overrides underlying component base CSS class name
Default'alert-link'
children unknown type
href string

Usage Insights#

Alert

Project Name	Paragon Version	Instance Count
edx-ora2	21.13.1	2
frontend-app-account	22.10.0	8
frontend-app-admin-portal	21.13.1	70
frontend-app-authn	22.11.2	9
frontend-app-communications	22.7.0	3
frontend-app-course-authoring	22.8.1	32
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.9.0	2
frontend-app-learner-portal-enterprise	21.13.1	22
frontend-app-learner-portal-programs	21.13.1	5
frontend-app-learner-record	22.10.0	5
frontend-app-learning	22.10.0	24
frontend-app-library-authoring	21.11.3	7
frontend-app-ora-grading	21.11.3	5
frontend-app-payment	22.9.0	1
frontend-app-profile	22.10.0	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.10.0	2
frontend-app-admin-portal	21.13.1	49
frontend-app-authn	22.11.2	8
frontend-app-communications	22.7.0	1
frontend-app-course-authoring	22.8.1	11
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.10.0	2
frontend-app-learning	22.10.0	3
frontend-app-library-authoring	21.11.3	1
frontend-app-ora-grading	21.11.3	4
frontend-app-profile	22.10.0	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.10.0	1
frontend-app-authn	22.11.2	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.10.0	1
frontend-lib-special-exams	22.7.0	3

Edit this page Leave feedback

Paragon Design System

Theme

Alert

Basic Usage

With Action Buttons

Variants

Kitchen Sink

Theme Variables (SCSS)#

Props API#

Usage Insights#

Alert

AlertHeading

AlertLink

All components (A-Z)

Theme

Alert

Basic Usage#

With Action Buttons#

Variants#

Kitchen Sink#

Theme Variables (SCSS)#

Props API#

Usage Insights#

Alert

AlertHeading

AlertLink

All components (A-Z)

Basic Usage

With Action Buttons

Variants

Kitchen Sink