Banner
Global banner is used to communicate important messages that usually relates to a high level concern such as a users account, subscription or security.
import { GlobalBanner, GLOBAL_BANNER_COUNT_CSS_VAR, GLOBAL_BANNER_HEIGHT, AppBanner, APP_BANNER_COUNT_CSS_VAR, APP_BANNER_HEIGHT, BannerAction } from '@balance-web/banner';GlobalBanner
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.
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. Without a tone, the banner has a muted background and no icon.
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.
Top offset
The number of global banners is maintained in a css variable whos' name is exported as GLOBAL_BANNER_COUNT_CSS_VAR. You can use this counter, together with GLOBAL_BANNER_HEIGHT, to calculate
top offsets for your layout if you have sticky/fixed navigation elements.
AppBanner
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.
isGlobal
When set to true, the css var APP_BANNER_COUNT_CSS_VAR will be incremented/decremented on mount/unmount so that it can be used in providing top offsets to page layout elements.
You can APP_BANNER_COUNT_CSS_VAR along with APP_BANNER_HEIGHT to calculate top offsets for your layout if you have stick/fixed navigation elements.
<AppBanner
text="App level banner"
tone="informative"
onClose={() => {}}
isGlobal
/>