Balance Logo
Balance
Reckon Design System
Open playroom

Banner

Use banners to communicate important messages that persist throughout the application.
Install
pnpm add @balance-web/banner
Import usage
import {
GlobalBanner,
AppBanner,
BannerProvider,
BannerAction
} from '@balance-web/banner';
  • Code
  • API

BannerProvider

Banners can only be used inside the BannerProvider component. It is recommended to use the BannerProvider at the root of your component, along with other Balance providers.

Note: Each code sample below is wrapped in a BannerProvider so that we can render more than one banner on the page. The provider prevents more than one banner to exist on a page. DO NOT use this as a hack to render multiple banners on a single page.

GlobalBanner

Global banner is used to communicate important messages that usually relates to a high level concern such as a users account, subscription or security.

Global banner should live outside the app frame (above the app header) to give it a distinct feel.

Use AppBanner for app specific messaging such .

Usage

GlobalBanner fills the width of its container.

There can only be one instance of GlobalBanner on a page, if there are multiple pending banners show the one with the highest priorty per the tone in the following order: critical, cautious, informative.

Edit in Playroom

text*

Set the message of the banner.

title

Set the title of the banner.

tone

Set the tone of the banner. If a tone is provided, an icon will be rendered before the title and message, unless a startElement is provided.

tone can have 3 values: critical, cautious and informative. Default tone is informative.

startElement

Render a start element before the text and/or title.

action

Give the user an action to address the message.

It takes a ReactNode, a standard action component BannerAction is included in the package which should be used in most cases.

AppBanner

App banner is used to communicate important messages that usually relates to a particular app.

App banner should live inside the app frame (under the app header) to give it a distinct feel.

Use GlobalBanner for non-app related messages such as account and security.

Usage

AppBanner fills the width of its container.

There can only be one instance of AppBanner on a page, if there are multiple pending banners show the one with the highest priorty per the tone in the following order: critical, cautious, informative.

text*

Set the message of the banner.

tone*

Set the background and icon color of the message.

tone can have 3 values: critical, cautious and informative.

title

Set the title of the banner.

action

Give the user an action to address the message.

It takes a ReactNode, a standard action component BannerAction is included in the package which should be used in most cases.

onClose

Allow the user to dismiss the banner. If onClose is provided, a close icon is rendered at the right end of the banner. It's the consumer's responsibility to manage the hiding/showing of banners, the onClose prop is only a click handler.

Copyright © 2024 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo