Banner

Components

Banner

Code

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

Name	Type	Default	Description
`text`	`React.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
`closeButtonLabel`	`string`	`'Close'`	Close icon aria label

Types of Banners

Type	Icon	Description
Info		Shown when neutral information is required.
Success		Shown when something goes right.
Warning		Shown when extra care should be taken.
Error		Shown when something goes wrong.
Opportunity		Shown 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"
/>