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, but can be dismissible using the onClose prop.

import { Banner } from '@sproutsocial/racine'
<Banner text="Information needs to be communicated to the user." />

Banner is of the type info by default.

Properties

NameTypeDefaultDescriptionRequired?
textReact.Node
type
'success'
'info'
'error'
'warning'
'opportunity'
'info'
Type of banner.
onClose() => void
Show the close icon in the banner with an action when clicked
closeButtonLabelstring'Close'
Close icon aria label

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.

Info (default)

<Banner text="Information needs to be communicated to the user." />

Success

<Banner type="success" text="Something was successful!" />

Warning

<Banner
type="warning"
text="The user should be aware and possibly exercise caution."
/>

Error

<Banner
type="error"
text="An error has occurred, here's feedback on how to proceed."
/>

Opportunity

<Banner
type="opportunity"
text="Announcing an opportunity or highlighting an offer."
/>

Dismissable Banners

<Banner
text="This is a dismissible banner."
onClose={() => alert('Well howdy there partner.')}
closeButtonLabel="Close the banner"
/>