Empty state

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.

​

Empty state

​

When to use

• First-time scenarios & user cleared: use an Empty state where the user may not have data. An Empty state is a great way to explain what they can do to populate the screen and provide the call to action. If it’s a user-cleared scenario, for example, they finished their to-dos or cleared an inbox, an Empty state might be positive and celebratory or encouraging of what to do next.
• No results: when a user searches for data, but the system cannot return any results, an Empty state is a great form of feedback to the user. Help them understand how best to modify their search.
• Error management: when something did not go as planned an Empty state can help guide the user back to the right path. Error messages paired with thoughtful guidance content can help the user resolve the error on their own or seek out the appropriate support channels. Error management might include permission issues, system issues or configuration required.

​

When to use something else

• Empty states vs. Onboarding flows: While Empty states can provide some contextual learning, they are not a replacement for onboarding experiences. This is why it’s crucial to think about Empty states from the very beginning.

​

Dos and don’ts

• Do include a primary call to action Button to help guide the user to act fast. Use secondary buttons to provide a way back to a previous screen (if applicable) or to link to additional documentation.
• Do use illustrations that reflect the situation.
• Do use a default size for full pages or large containers. Use a compact size for small containers or Drawers and side panels.
• Don’t use product-specific terms that the user may not yet understand or discuss content that is not relevant to that page.
• Don’t adjust the styling or add alternative backgrounds to the primitive.
• Don’t cover multiple call to actions in one Empty state. If there are multiple things a user can do, pick the most important and keep the focus on that action.

​

Behavior

• Occupies the primary content region until the user resolves the empty or error condition; primary CTA should map to the next constructive step.
• Illustrations and copy are static guidance, not a substitute for Banner or Alert for live system faults unless paired appropriately.

​

Often used with

• Primary (and optional secondary) Button; illustration or icon slot; headings/copy—pair with Search or filters when “no results” depends on query.