Components

Banner

Banner is an inline, page level alert.

Use banners for displaying supplemental information in a workflow. Banners should be used on the same elevation and in close proximity to the item described by the content of the banner.

Banner messages are most often persistent, not dismissible.

An error has occurred, here's actionable feedback on how to proceed.
import { Banner } from '@sproutsocial/racine'

Banner is of the type DANGER by default.

Properties

NameTypeDefaultDescriptionRequired?
textReact.Node
type
"success"
"info"
"danger"
"error"
"warning"
"danger"
Type of banner. "danger" is deprecated in favor of "error"

Types of Banners

TypeIconDescription
InfoShown when neutral information is required.
SuccessShown when something goes right.
WarningShown when extra care should be taken.
ErrorShown when something goes wrong.

Error/Danger (default)

An error has occurred, here's feedback on how to proceed.

Warning

The user should be aware and possibly exercise caution.

Success

Something was successful!

Info

Information needs to be communicated to the user.