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

System props

System props apply standard sets of properties to a component that can be used to alter its appearance on the fly.

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

Types of Banners

1.
2.
3.
4.
  1. Error -
    Shown when something goes wrong.
  2. Warning -
    Shown when extra care should be taken.
  3. Success -
    Shown when something goes right.
  4. Info -
    Shown when neutral information is required.

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.