Skip to content
Telescope

BannerNew: New

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.

Information:
We'll be migrating everyone to the new export page soon.

Info

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

Information:
Your trial will end in 5 days.

Positive

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

Success:
Your plan has been upgraded, enjoy using Pleo!

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.

Warning:
We weren't able to debit your bank account to repay your Pleo Reserve. To keep your account active, top up your wallet

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.

Error:
Integrations (Ability to export expenses to third-party services): Major outage
See status

Discover

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

New:
Keep employee access up-to-date by connecting Pleo to your people management system. Register for early access

Loud

Use the loud prop when you need to make a Banner stand out more, when the message is urgent and/or time senstive.

Warning:
Performance of the Pleo application is currently degraded.

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.

New:
Get the most out of your onboarding period with our handy guides.

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.

Error:
Integrations (Ability to export expenses to third-party services): Major outage
See status

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.