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

    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'

Contents

Guides

Foundations

PlaygroundBeta

  • A drag-and-drop UI builder for prototyping with Paragon components.

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)