Newskit Logo
About

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

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
import React from 'react';
import { Banner } from 'newskit';

export default () => (
  <Banner
    overrides={{ stylePreset: 'bannerInformative' }}
    icon="your icon here"
    title="Banner title"
    actions="your actions here"
  >
    Banner message will display in this space
  </Banner>
);

Anatomy

A Banner contains two required elements and three optional elements.

ItemNameDescriptionComponentOptional
1
IconIndicates the status or intent.
2
TitleReinforces the message text.Text Block
3
MessageCommunicates what is about to happen or has happened.
4
Action(s)Enables a user to perform a relevant action such as Undo’.

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.

Do not

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.

Do not

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.

Do not

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.

Focus order
OrderElementRole
1
LinkFocusses to the link in the message (if provided)
2
ActionFocusses to the first action (if provided)
WAI-ARIA
ElementAttributeValueDescriptionUser Supplied
banner

aria-role

region

The region landmark role is used to identify an area in the document that counted as significant. It is used to provide a generic landmark for people to be able to navigate to easily when none of the other landmark roles are appropriate.
banner

aria-label

Banner

Defines the Aria-label of the Banner.
banner

aria-live

"polite", "assertive" or "off" (default)

This prop needs to be set when the Banner appears on the screen at runtime. For more information check the description for aria live at, Mozilla docs.

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
children

Exclude<React.ReactNode, 'undefined'>

Sets the content of the Banner.
layout

MQ<'horizontal' | 'vertical'>

xs: vertical

md: horizontal

If provided, defines the content of the title in the Banner.
title

string

If provided, defines the content of the title in the Banner.
icon

React.ReactElement<NewsKitIconProps>

Icon used to indicate the status or intent of the Banner.
actions

React.ComponentType[]

If provided, defines the action(s) that is/are displayed in the Banner.
onClose

function

If you pass onClose callback function to the banner it will display a close button. The function can be used to manage the external (open/closed) state of the banner.
closeButtonLabel

string

If provided, overrides the close Button label for the vertical orientation of the Banner.

NOTE - For horizontal orientation the Banner always displays a close Icon Button and uses this prop as aria-label for the icon-button.

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
VariationsRelevant variations (style, size, orientation etc.)
Interactive statesAll interactive states that are applicable (hover, active, focus, focus, disabled, error etc).
Defined behavioursGuidelines for layout, animation, interactions, etc.
Usage guidelinesIncludes a list of dos and don’ts that highlight best practices and common mistakes to avoid.
Accessibility guidelinesFollows WCAG 2.0 standards (AA). Accessibility documentation defined including focus order, keyboard interactions and ARIA.
SEO guidelinesConforms to best practice SEO techniques. SEO considerations defined.
PropsDetails of component properties - their name, type, options, default, whether it’s required and their description have been defined.
Technical performance considerationsDetails on how this component may impact performance.
Available in UI kitIncluded within Figma Web Gallery file.
Design specificationsDetailed design specification including sizing, spacing and design tokens defined.
ThemesDisplays correctly across light and dark themes.

Need Help?

Cant find what you are looking for?

Cant find what you are looking for?