Newskit Logo
Newskit Logo
View Github

Components

Banner

A Banner communicates essential information without blocking an experience. They are positioned at the top of the screen, so they are noticeable. They require user action to disappear.

Status

Beta

Introduced

v3.0

View code

Status

Beta

Introduced

v3.0

Interactive Demo

This demo allows you to preview the Banner component, its variations, and configuration options.

Banner title

Banner message will display in this space

Banner title

Banner message will display in this space

Intent
Icon
Actions
Close button
1import React from 'react';
2import { Banner } from 'newskit';
3
4export default () => (
5  <Banner
6    overrides={{ stylePreset: 'bannerInformative' }}
7    icon="your icon here"
8    title="Banner title"
9    actions="your actions here"
10  >
11    Banner message will display in this space
12  </Banner>
13);
14

Anatomy

A Banner contains two required elements and three optional elements.

ItemNameDescriptionComponentOptional

Options

A Banner has the following options to provide an appropriate experience for different scenarios.

Orientation

A Banner can be displayed horizontally or vertically to effectively and appropriately use the space available on a screen.

When vertical the content is stacked and the width of the buttons are full-width.

Intent

A Banner has three intents: informative, notice and negative. Each intent is used to communicate a specific semantic tone of the Banner to the user.

Icon

An icon can be displayed in Banner to provide the user with a visual cue and to help those with colour blindness discern the message tone.

Title

A title can be displayed in the Banner to provide the user with extra context to the Banner message.

Actionable

A CTA button with a contextual message can be added to the Banner to provide the user with a starting point, for a particular flow.

Dismissible

A close button can be added to the banner to prove the user with a way to dismiss the banner.

Orientation

A Banner can be displayed horizontally or vertically to effectively and appropriately use the space available on a screen.

When vertical the content is stacked and the width of the buttons are full-width.

Intent

A Banner has three intents: informative, notice and negative. Each intent is used to communicate a specific semantic tone of the Banner to the user.

Icon

An icon can be displayed in Banner to provide the user with a visual cue and to help those with colour blindness discern the message tone.

Title

A title can be displayed in the Banner to provide the user with extra context to the Banner message.

Actionable

A CTA button with a contextual message can be added to the Banner to provide the user with a starting point, for a particular flow.

Dismissible

A close button can be added to the banner to prove the user with a way to dismiss the banner.

Behaviours

The following guidance describes how a Banner behaves.

Text Overflow Wrap

When the title and/or message in the Banner is too long for the available horizontal space, it wraps to form another line.

Text Overflow Wrap

When the title and/or message in the Banner is too long for the available horizontal space, it wraps to form another line.

Usage

The following guidance describes how and when to appropriately use a Banner component.

Do

Banners should be reserved only for essential system-level information, such as internet connection issues, expirations of subscriptions, payment failures or major product changes. For confirmations of actions or promotional messaging use another feedback component such as a Toast.

Don’t

Never show multiple Banners at the same time. When multiple Banners are consecutively or simultaneously triggered, the Banner with more importance should replace an existing Banner of lesser importance until the higher priority one has been resolved.

Do

Whenever possible, add an action in the Banner for a user to quickly resolve the associated Banner message.

Don’t

Avoid using more than one action in a Banner. (excluding the dismiss button). Having more than one action to choose from can make it difficult for users to decide what action to do next.

Do

Banners should be positioned at the top of a page, below the navigation header.

Don’t

Never allow Banners to time out. They should only disappear on user interaction (either dismissing or completing a task) or when the information is no longer relevant, e.g. updating failed payment details.

Do

Use the appropriate intent to convey the tone of the Banner message. If the tone is neutral use the informative intent Banner.

Do

If a user dismisses a Banner without resolving the issue, it should be displayed again at the next possible occasion, without overwhelming the user e.g. the next time session.

Do

Keep a Banner's message clear and concise, describing what's happening, and what the user needs to know and do.

Accessibility Considerations

A Banner implements the latest WAI-ARIA A Banner specifications..

Focus order
OrderElementRole
WAI-ARIA
ElementAttributeValueDescriptionUser Supplied

SEO Considerations

There are no SEO considerations for this component.

API

A Banner has a range of props that can be used to define an appropriate experience for different use cases.

Banner
NameTypeDefaultDescriptionRequired

Compliance

All of the components in the NewsKit design system go through a comprehensive set of checks to ensure that we are producing compliant and best practice components.

FeatureDescriptionStatus

Need Help?

Cant find what you are looking for?

Need Help?

Cant find what you are looking for?