Banner

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.

<GlobalBanner text="Message goes here" />

text*

Set the message of the banner.

<GlobalBanner text="Message goes here" />

title

Set the title of the banner.

<GlobalBanner title="Global Notification" text="Message goes here" />

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.

<Stack gap="large">
  <GlobalBanner
    iconBefore={AlertCircleIcon}
    tone="critical"
    text="Message goes here"
  />
  <GlobalBanner
    iconBefore={AlertCircleIcon}
    tone="cautious"
    text="Message goes here"
  />
  <GlobalBanner
    iconBefore={AlertCircleIcon}
    tone="informative"
    text="Message goes here"
  />
</Stack>

startElement

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

<GlobalBanner
  startElement={
    <Button
      size="small"
      variant="outline"
      label="Custom Action"
      onClick={() => alert('Custom action')}
    />
  }
  text="Message goes here"
/>

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.

<GlobalBanner
  text="Message goes here"
  action={<BannerAction href="#">Action</BannerAction>}
/>

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

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.

<AppBanner text="Message goes here" tone="informative" />

text*

Set the message of the banner.

<AppBanner text="Message goes here" tone="informative" />

tone*

Set the background and icon color of the message.

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

<Stack gap="large">
  <AppBanner
    iconBefore={AlertCircleIcon}
    text="Message goes here"
    tone="critical"
  />
  <AppBanner
    iconBefore={AlertCircleIcon}
    text="Message goes here"
    tone="cautious"
  />
  <AppBanner
    iconBefore={AlertCircleIcon}
    text="Message goes here"
    tone="informative"
  />
</Stack>

title

Set the title of the banner.

<AppBanner
  title="App Notification"
  text="Message goes here"
  tone="informative"
/>

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
  text="Message goes here"
  tone="informative"
  action={<BannerAction href="#">Action</BannerAction>}
/>

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.

const [bannerOpen, setBannerOpen] = useState(true);
return bannerOpen ? (
  <AppBanner
    text="Message goes here"
    tone="critical"
    onClose={() => setBannerOpen(false)}
  />
) : null;

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
/>