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

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

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

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

<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)#

// 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 Required
Docstring for the children prop
icon func Required
Docstring for the icon prop... Icon that will be shown in the alert
show bool Required
Whether the alert is shown.
Defaulttrue
dismissible bool Required
Whether the alert is dismissible. Defaults to true.
Defaultfalse
onClose func Required
Optional callback function for when the alert it dismissed.
Default() => {}
actions element Required[] Required
Optional list of action elements. May include, at most, 2 actions, or 1 if dismissible is true.
stacked bool Required
Position of the dismiss and call-to-action buttons. Defaults to false.
Defaultfalse
closeLabel string Required | element Required Required
Sets the text for alert close button, defaults to 'Dismiss'.

AlertHeading Props API

as elementType Required
Specifies the base element
DefaultdivWithClassName('h4')
bsPrefix string Required
Overrides underlying component base CSS class name
Default'alert-heading'

AlertLink Props API

as elementType Required
Specifies the base element
Default'a'
bsPrefix string Required
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)#

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)

Alert

Basic Usage#

With Action Buttons#

Variants#

Kitchen Sink#

Theme Variables (SCSS)#

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)

Basic Usage

With Action Buttons

Variants

Kitchen Sink