Paragon Design System

Technical Documentation

npm_version
Changelog
GitHub

Alert

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

Variants

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:                  0px 1px 2px rgba(0, 0, 0, 0.15), 0px 1px 4px rgba(0, 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.

    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

    Sets the text for alert close button.

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

Contents

Guides

Foundations

Components

Buttonlike
Choreography
Content
Forms
Forms (deprecated)
Hooks
Imagery & Iconography
Layout
Navigation
Overlays
Status & metadata
Table

All components (A-Z)