Skip to main content

Banner

Display a prominent message at the top of the screen.

Banners enable you to display system feedback and inform users about system-wide activities, such as maintenance, updates, etc.

They come in two types: info and highlight.

View in StorybookExternal link icon

Behavior​

The banner appears on top of the screen and sticks to this position. It takes the whole content area width and pushes all the content down.

Best practices​

Avoid using banners to provide information related to page-level and out-of-view events, like Report generation completed. Use a toast instead.

Accessibility​

Keyboard focus​

  • The keyboard focus state affects only Action buttons within the Banner.
  • The focus replicates the button’s visual hover state and adds a 2px white ring (Info message) or ring in a primary colour (Highlight banner).

Keyboard interactions​

See the ARIA Authoring Practices Guide: Alert Pattern for guidance on expected keyboard interactions, including roles, states, and properties.

Resources​

Refer to Understanding 2.1.1 Keyboard for more information on expectations, intent, benefits, and techniques.