Skip to main content

Pivotal UI

v19.2.2

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:

Various alerts
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:

Dismissable alert
ReferenceError: React is not defined

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

Dismissable alert with callback
ReferenceError: React is not defined

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

Alert with icon
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.

Alert with complex content
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.

Controlled alert
ReferenceError: React is not defined

Props

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

PropertyRequiredTypeDefaultDescription
closeLabelnoNode'Close alert'Screen reader label attached to close button
dismissablenoBooleanfalseIf true, render a close button
onDismissnoFunctionCallback that is called when the user clicks the close button
shownoBooleanIf set, overrides the close button. True shows the alert, false hides the alert.
withIconnoBooleanfalseIf true, render alert with an icon

Imports

Import React components (including CSS):

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

Import CSS only:

import 'pivotal-ui/css/alerts';