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.

import { Banner } from '@sproutsocial/racine'

Banner is of the type DANGER by default.

Properties

NameTypeDefaultDescriptionRequired?
textReact.Node
type
"success"
"info"
"danger"
"error"
"warning"
"opportunity"
"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.
OpportunityShown when announcing an opportunity or highlighting an offer.

Error/Danger (default)

Warning

Success

Info

Opportunity