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

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


Kitchen Sink

Theme Variables (SCSS)#

// Alerts
// Define alert colors, border radius, and padding.
$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);
Alert Props API
  • 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.

  • dismissible bool

    Whether the alert is dismissible. Defaults to true.

  • 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.

  • closeLabel string | element

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

AlertHeading Props API
  • as elementType

    Specifies the base element

  • bsPrefix string

    Overrides underlying component base CSS class name