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 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'

AlertLink Props API

as elementType
Specifies the base element
Default'a'
bsPrefix string
Overrides underlying component base CSS class name
Default'alert-link'

Usage Insights#

Alert

Project Name	Paragon Version	Instance Count
edx-ora2	20.9.2	2
frontend-app-account	20.46.3	8
frontend-app-admin-portal	20.46.3	64
frontend-app-authn	20.46.2	9
frontend-app-communications	20.46.2	3
frontend-app-course-authoring	20.46.2	16
frontend-app-discussions	20.44.0	3
frontend-app-ecommerce	20.46.2	2
frontend-app-enterprise-public-catalog	20.46.3	2
frontend-app-gradebook	20.45.0	5
frontend-app-learner-dashboard	20.46.2	2
frontend-app-learner-portal-enterprise	20.45.4	22
frontend-app-learner-portal-programs	20.45.5	5
frontend-app-learner-record	20.46.3	5
frontend-app-learning	20.46.0	23
frontend-app-library-authoring	21.5.6	7
frontend-app-ora-grading	20.46.3	5
frontend-app-payment	20.46.2	1
frontend-app-profile	20.46.3	3
frontend-app-program-console	20.46.2	5
frontend-app-publisher	20.46.2	25
frontend-app-support-tools	20.46.0	15
frontend-lib-content-components	21.5.6	5
frontend-lib-special-exams	20.44.0	4
prospectus	20.46.2	3

AlertHeading

Project Name	Paragon Version	Instance Count
frontend-app-account	20.46.3	2
frontend-app-admin-portal	20.46.3	44
frontend-app-authn	20.46.2	8
frontend-app-communications	20.46.2	1
frontend-app-course-authoring	20.46.2	4
frontend-app-ecommerce	20.46.2	2
frontend-app-enterprise-public-catalog	20.46.3	1
frontend-app-learner-portal-enterprise	20.45.4	5
frontend-app-learner-record	20.46.3	2
frontend-app-learning	20.46.0	3
frontend-app-library-authoring	21.5.6	1
frontend-app-ora-grading	20.46.3	4
frontend-app-profile	20.46.3	1
frontend-app-publisher	20.46.2	4
frontend-app-support-tools	20.46.0	1
frontend-lib-content-components	21.5.6	2
frontend-lib-special-exams	20.44.0	2
prospectus	20.46.2	1

AlertLink

Project Name	Paragon Version	Instance Count
frontend-app-account	20.46.3	1
frontend-app-authn	20.46.2	4
frontend-app-course-authoring	20.46.2	10
frontend-app-enterprise-public-catalog	20.46.3	1
frontend-app-learner-portal-enterprise	20.45.4	2
frontend-app-learner-portal-programs	20.45.5	1
frontend-app-profile	20.46.3	1
frontend-lib-special-exams	20.44.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