Alerts

Use the SuccessAlert, ErrorAlert, InfoAlert, and WarningAlert components to alert the user of some change in state.

For example, here are alerts for various outcomes of uploading a file:

ReferenceError: React is not defined

To allow the user to hide the alert after reading it, set the dismissable prop to add a clickable close icon:

ReferenceError: React is not defined

To perform some action when the user dismisses an alert, set the onDismiss prop:

ReferenceError: React is not defined

Use the withIcon prop to add an icon to the alert:

ReferenceError: React is not defined

Alerts can contain any content. To have links within this content styled correctly, apply the pui-alert-link class to any <a> tag that appears inside the alert.

ReferenceError: React is not defined

By default, alerts maintain their dismissed/not dismissed state internally. To hold this state at a higher level (in a parent component), pass the show prop to the alert.

ReferenceError: React is not defined

Props

The SuccessAlert, ErrorAlert, InfoAlert, and WarningAlert components all take the following props:

Imports

Import React components (including CSS):

import {SuccessAlert, InfoAlert, WarningAlert, ErrorAlert} from 'pivotal-ui/react/alerts';

Import CSS only:

import 'pivotal-ui/css/alerts';