Banner

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.

<BannerProvider>
  <GlobalBanner text="Message goes here" />
</BannerProvider>

text*

Set the message of the banner.

<BannerProvider>
  <GlobalBanner text="Message goes here" />
</BannerProvider>

title

Set the title of the banner.

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

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">
  <BannerProvider>
    <GlobalBanner
      iconBefore={AlertCircleIcon}
      tone="critical"
      text="Message goes here"
    />
  </BannerProvider>
  <BannerProvider>
    <GlobalBanner
      iconBefore={AlertCircleIcon}
      tone="cautious"
      text="Message goes here"
    />
  </BannerProvider>
  <BannerProvider>
    <GlobalBanner
      iconBefore={AlertCircleIcon}
      tone="informative"
      text="Message goes here"
    />
  </BannerProvider>
</Stack>

startElement

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

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

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.

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

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.

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

text*

Set the message of the banner.

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

tone*

Set the background and icon color of the message.

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

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

title

Set the title of the banner.

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

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.

<BannerProvider>
  <AppBanner
    text="Message goes here"
    tone="informative"
    action={<BannerAction href="#">Action</BannerAction>}
  />
</BannerProvider>

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 (
  <BannerProvider>
    {bannerOpen && (
      <AppBanner
        text="Message goes here"
        tone="critical"
        onClose={() => setBannerOpen(false)}
      />
    )}
  </BannerProvider>
);