Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.cognite.com/llms.txt

Use this file to discover all available pages before exploring further.

v1.0.0 | View in Storybook Banners are considered high-emphasis communication and should be used sparingly. High-priority feedback is urgent and requires immediate action. These messages are more noticeable and disruptive. They should draw attention or disrupt the user’s flow.

​
When to use

  • Promotion: Use a Banner to promote new features or product offerings.
  • Application states: Use a Banner to indicate entire application states such as offline, online, draft state, or edit mode.
  • User access: Use a Banner to indicate a user’s access setting, such as view only with the option to request edit rights.

​
When to use something else

  • Task-specific feedback: Do not use a Banner to provide feedback after a user completed or failed a specific task. Depending on the context, consider inline validation, an Alert, Sonner, or Dialog.
  • Navigation: Banners should not be used for internal application navigation. Use the top bar pattern and primitives such as Tabs for in-page structure.

​
Dos and don’ts

  • Do place the Banner at the top of the UI, above the Topbar.
  • Don’t stack multiple Banners on top of each other.
  • Do respect the max height of the Banner, and keep text to a single line.

​
Behavior

  • High-emphasis, full-width region above primary chrome; may be dismissible or persistent per product rules (including across sessions for announcements).
  • Does not trap focus; critical confirmations belong in Dialog or Alert dialog.

​
Often used with

  • Primary or dismiss Button; optional text link; does not replace page Tabs or primary nav.
Last modified on May 11, 2026