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'

Paragon Design System

Alert

Basic Usage

With Action Buttons

Variants

Kitchen Sink

Theme Variables (SCSS)

children

icon

show

dismissible

onClose

actions

stacked

closeLabel

as

bsPrefix

as

bsPrefix

Guides

Foundations

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)