Skip to content
Telescope
Components

Banner

A prominent section at the top of a page that provides users with important feedback or information relating to the entire page, product, or application.
Information:
Start your free trial of Pleo by adding money to your Wallet.

Features

  • Available in various semantic variants.
  • Includes built-in default icons for each variant.
  • Top border can be made striped for emphasis.

When to use

Use banners to highlight important information that relates to the entire page or application. Banners do not tend to result from user action. They can also be used to communicate information that is not critical to the user, but that they should be aware of.

Examples

Neutral

Use the neutral variant to communicate information that is not critical to the user.

Show code
<Banner variant="neutral">
    <Banner.Content>
        <Banner.Text>We'll be migrating everyone to the new export page soon.</Banner.Text>
    </Banner.Content>
</Banner>

Info

Use the info variant when you want to draw attention to information that is important, but not critical to the user.

Show code
<Banner variant="info">
    <Banner.Content>
        <Banner.Text>Your trial will end in 5 days.</Banner.Text>
    </Banner.Content>
</Banner>

Positive

Use the positive variant to communicate that a desired outcome has been achieved.

Show code
<Banner variant="positive">
    <Banner.Content>
        <Banner.Text>Your plan has been upgraded, enjoy using Pleo!</Banner.Text>
    </Banner.Content>
    <Banner.CloseButton aria-label="Dismiss" />
</Banner>

Warning

Use the warning variant to notify users about unanticipated behaviors or consequences, minor app performance issues, or that they need to take some action soon.

Show code
<Banner variant="warning">
    <Banner.Content>
        <Banner.Text>
            We weren't able to debit your bank account to repay your Pleo Reserve. To keep your
            account active, <Link>top up your wallet</Link>
        </Banner.Text>
    </Banner.Content>
</Banner>

Negative

Use the negative variant to communicate that a desired outcome has not been achieved, there are major performance issues in the app, or that an error has occurred.

Show code
<Banner variant="negative">
    <Banner.Content>
        <Inline alignItems="center" justifyContent="space-between">
            <Banner.Text>
                Integrations (Ability to export expenses to third-party services):{' '}
                <strong>Major outage</strong>
            </Banner.Text>
            <Link css={{whiteSpace: 'noWrap'}}>See status</Link>
        </Inline>
    </Banner.Content>
    <Banner.CloseButton aria-label="Dismiss" />
</Banner>

Discover

Use the discover variant to communicate new features or functionality that users might not be aware of.

Show code
<Banner variant="discover">
    <Banner.Content>
        <Banner.Text>
            Keep employee access up-to-date by connecting Pleo to your people management system.{' '}
            <Link>Register for early access</Link>
        </Banner.Text>
    </Banner.Content>
</Banner>

With custom icon

Use a custom icon to communicate a more specific message to the user. Custom icons should be used sparingly, and only to re-inforce the message you're communicating when the default icon does not suffice.

Show code
<Banner variant="discover" Icon={Lightbulb}>
    <Banner.Content>
        <Banner.Text>Get the most out of your onboarding period with our handy guides.</Banner.Text>
    </Banner.Content>
</Banner>

With close button

For banners that are only relevant in the moment, use a close button to allow users to dismiss the notification. The decision to dismiss the banner should not have any consequences for the user and the message should not be shown again after it has been dismissed unless it becomes relevant again.

Show code
<Banner variant="negative">
    <Banner.Content>
        <Inline alignItems="center" justifyContent="space-between">
            <Banner.Text>
                Integrations (Ability to export expenses to third-party services):{' '}
                <strong>Major outage</strong>
            </Banner.Text>
            <Link css={{whiteSpace: 'noWrap'}}>See status</Link>
        </Inline>
    </Banner.Content>
    <Banner.CloseButton aria-label="Dismiss" />
</Banner>

Best practices

Do
Clearly and succinctly communicate the purpose of the message.
Don't
Overcrowd the banner with too much text, which can overwhelm users and dilute the message.
Do
Incorporate relevant icons to enhance understanding and attract attention.
Don't
Use custom icons that don't help to convey a specific message.
Do
Include actionable information such as links for users to take further steps if necessary.
Don't
Add unnecessary information, ensure the content of the banner is relevant to the user and the purpose of the page.
Do
Allow users to close banners if the information does not need to be persistant.
Don't
Style the banner to remain fixed at the top of the page as users scroll, as this can be intrusive.

Accessibility

To satisfy WCAG 1.1.1 ("All non-text content that is presented to the user has a text alternative that serves the equivalent purpose"), Banners have visually hidden prefixes applied before the content. These can be overridden using visuallyHiddenPrefix.

VariantPrefix
InfoInformation:
NeutralInformation:
PositiveSuccess:
NegativeError:
WarningWarning:
DiscoverNew:

Related components

  • Action banner: A versatile and somewhat unopinionated component. Commonly used as a linkbox to combine multiple elements into a single interactable element.
  • Callout: Capture the attention of users and provide them with important feedback or information that relates to an entire page or page section.
  • Promotional Banner: Displays an important, succinct, promotional message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.
Didn't find what you were looking for?
Let us know in #team-design-systems or make a request.
Edit this page