Data display
These primitives help you present structured information, identity, and content so users can scan, compare, and understand what they are looking at.| Primitive | Definition | Status | |
|---|---|---|---|
| Accordion | An Accordion primitive serves as an interactive UI element that helps manage content by displaying or hiding sections of information based on user interactions. It is particularly useful where space is limited and large amounts of information must be shown in a compact, organized way. | v1.0.0 | View in Storybook |
| Avatar | An Avatar is a graphical representation of a user or concept. It is typically used to personalize user interfaces by displaying profile pictures, initials, or icons and help users quickly recognize individuals in collaborative environments. | v1.0.0 | View in Storybook |
| Badge | Badges can be thought of as a stylized way to show contained bits of information within a context. Depending on what information you would like to display and what functionality is needed, there are five choices to choose from: | v1.0.0 | View in Storybook |
| Card | A simple, reusable container with optional header and footer content, and a flexible body content slot. Optional header and footer content can be used and is structured to support consistency across the product. The Card body area is for data artifacts or widgets. | v1.0.0 | View in Storybook |
| Collapsible | A single inline expandable block that shows or hides content when triggered. Use when one section of a page needs to toggle independently of other sections. | v1.0.0 | View in Storybook |
| Data grid | A Data grid is a table that allows for filtering or manipulating data views as well as editing individual data fields. | In progress | |
| Tree view | A Tree view primitive displays hierarchical data in a nested structure. Each row in the Tree view can be expanded to reveal child elements or collapsed to hide them. Rows can also be selected, dragged, etc., depending on the primitive’s configuration. | In progress |
Inputs and actions
These primitives capture user input, trigger operations, and expose dense controls for forms, settings, and editing workflows.| Primitive | Definition | Status | |
|---|---|---|---|
| Button | Use a Button to communicate actions users can take and to allow users to interact with the page. Each page should have only one primary Button, and any remaining calls to action should be represented as lower-emphasis Buttons. | v1.0.0 | View in Storybook |
| Calendar | Sub-primitive used within DateTimePicker. It can be used independently or with a Clock depending on whether the user needs a date, a time, or both. | v1.0.0 | |
| Checkbox | Checkboxes allow users to select one or multiple options from a list. They are often used in forms, settings, or interfaces requiring multiple selections, and can stand alone or sit inside Menus, Tree views, Data tables, or Cards. | v1.0.0 | View in Storybook |
| Clock | A visual time selector used inside DateTimePicker or standalone for time-only input. Handles hour and minute selection — only include seconds when the use case genuinely requires that level of precision. | v1.0.0 | |
| Combobox | A searchable select input that filters a list of options as the user types. Supports single and multi-select, and optionally allows users to add new items that aren’t in the existing list. | v1.0.0 | View in Storybook |
| Date and time picker | Date and time primitives follow the dateTime config provider. Display and parsing respect the user’s locale; users may override format in profile settings where the product allows. | v1.0.0 | View Date picker in Storybook |
| File upload | The File upload allows the user to upload files either by dragging and dropping files into the upload field or clicking to open the local system’s finder, allowing users to select and upload files from their computer or device. | In progress | |
| Helper text | Supplementary text below a form field that provides guidance, constraints, or feedback. Always tied to a specific field — it’s not a general annotation element. | v1.0.0 | View in Storybook |
| Input | Input is a field that allows users to enter and submit text information. | v1.0.0 | View in Storybook |
| KBD | KBD, known as keyboard shortcuts, provide users with quick access to frequently used actions or commands, improving efficiency and streamlining workflows. They are typically represented by key combinations (e.g., Ctrl + C) and can appear in contexts like Menus, Tooltips, or documentation. | v1.0.0 | View in Storybook |
| Label | A form label that identifies an input field. Always paired with a form control — it’s not a general-purpose text element. | v1.0.0 | View in Storybook |
| Radio | Radio buttons allow users to select one option from a list of mutually exclusive choices. Once a selection is made, it typically persists until the user selects a different option. | v1.0.0 | View in Storybook |
| Search | A specialized Input for finding and filtering content. The search icon and clear button are built in — don’t add your own. | v1.0.0 | View in Storybook |
| Segmented control | Segmented controls allow users to switch between different views, categories, or content filters in real time, without leaving the current page or context. They’re typically used for mutually exclusive options, where selecting one option deselects the others. | v1.0.0 | View in Storybook |
| Select | Select allows users to choose one or more pre-defined options from a list. It’s typically used in forms or filtering contexts where predefined options are available. | v1.0.0 | View in Storybook |
| Slider | A Slider allows users to select a value (or a range of values) from a predefined scale by moving a handle along a track. It’s ideal for adjusting settings or selecting approximate values quickly and visually. | In progress | |
| Switch | A Switch toggles a setting on or off. It represents a binary state and should update immediately when toggled. Switches are typically used for system or feature controls that take effect right away. | v1.0.0 | View in Storybook |
| Textarea | A Textarea allows users to input and edit multiple lines of text. It is designed for collecting longer or more complex information such as comments, feedback, messages, descriptions, or additional notes. | v1.0.0 | View in Storybook |
| Toggle group | A set of mutually exclusive options where one or multiple can be selected. Use it for toggling on settings, such as grid lines, rulers, or text formatting options like bold, italics, underline, etc. | v1.0.0 | View in Storybook |
| Toolbar | Toolbars give users quick access to common actions, tools, or commands. Think of them like a row of Buttons or icons that let you do things without digging through settings or Menus. They are placed contextually near the element they affect or sometimes only appear when an element is selected. | In progress |
Feedback and status
These primitives communicate outcomes, loading, validation, and high-level product or page state so users stay informed and oriented.| Primitive | Definition | Status | |
|---|---|---|---|
| Alert | An Alert communicates information about a specific user action on a page. It lives inside the page and appears contextually within a task flow and disappears when the user closes it, resolves the issue, or (if required by feature) navigates away from the page. | v1.0.0 | View in Storybook |
| Banner alert | Banners are seldom used, but part of our notification and alert ecosystem. They are placed at the top of the UI to show prominent notifications or messages for the product or system, to show a connection issue or to promote a new experience. | v1.0.0 | View in Storybook |
| Empty state | Empty states guide users when there is no content to display or when an error prevents data from loading. They serve to inform, assist, and encourage users toward the next steps. | v1.0.0 | View in Storybook |
| Page loader | Page loaders can be used as full page loaders, covering the entire page while content is loading or within the main content area. | v1.0.0 | View in Storybook |
| Progress | Shows how far through a task or process the user is. Use when completion is measurable and expressing it as a percentage or fraction is meaningful to the user. | v1.0.0 | View in Storybook |
| Sonner | Sonner is a toast notification that appears at the bottom of the screen and auto-dismisses after a few seconds. | v1.0.0 | View in Storybook |
Navigation
These primitives support orientation, hierarchy, paging, and command discovery so users can move through the product efficiently.| Primitive | Definition | Status | |
|---|---|---|---|
| Breadcrumbs | Breadcrumbs allow users to quickly and dependably gain their bearings within our product. It provides a hierarchical path to help users navigate back to previous pages efficiently. | v1.0.0 | View in Storybook |
| Command | A keyboard-first search interface for finding and executing actions, navigating to pages, or looking up content across the application. Typically triggered by a keyboard shortcut (⌘K / Ctrl+K) and rendered inside a Dialog or Popover. | v1.0.0 | View in Storybook |
| Menu | Menu contains a list of one or more menu items, which represent a command, option, or state that affects the current selection or context. There are two types of menus: context menus and dropdown menus. | v1.0.0 | View in Storybook |
| Pagination | Pagination helps users navigate large sets of data by dividing them into manageable pages. It allows for faster load times, better user control, and easier data scanning. | v1.0.0 | View in Storybook |
| Tabs | Tabs help users organize and navigate between sections of related content without leaving the page. They provide an efficient way to display different views or categories of information in the same context. | v1.0.0 | View in Storybook |
| Topbar | The Topbar is the single, persistent navigation bar that sits at the top of every authenticated Cognite Data Fusion (CDF) and Flows custom app. It is the primary chrome layer that orients users — showing where they are, how to get back, and what global actions are available. | v1.0.0 | View in Storybook |
Surfaces and overlays
These primitives layer above the main canvas—modals, anchored panels, tooltips, and transient action regions—to focus attention or complete a secondary task.| Primitive | Definition | Status | |
|---|---|---|---|
| Action toolbar | An Action toolbar is a transient UI primitive that provides users with quick access to key actions relevant to a specific page, section, or data set. | v1.0.0 | View in Storybook |
| Alert dialog | An Alert dialog is a modal dialog that appears when a user needs to confirm or take action on a specific issue before continuing. | In progress | |
| Dialog | A Modal interrupts the main workflow to capture user attention. It requires users to interact with it before they can return to the main screen. | v1.0.0 | View in Storybook |
| Popover | Popovers, which are commonly triggered by Buttons, appear contextually near the trigger element allowing users to interact more efficiently with the UI. They are often used for lightweight interactions or providing contextual information in forms. | v1.0.0 | View in Storybook |
| Select panel | Select panel allows users to select one or more items but can also be paired with more complex controls, like Checkboxes or re-ordering. Select panels are often triggered by (icon) Buttons. | In progress | |
| Separator | A Separator is a one pixel thick UI element used to create visual separation between sections or content. It helps improve readability and organization without overwhelming the layout. They can be horizontal or vertical in their orientation. | v1.0.0 | View in Storybook |
| Tooltip | Tooltips are typically used for explaining icons, Buttons, links, or actions that might not be immediately obvious. Tooltips are presented inside a container that is displayed when a user hovers or focuses on an element. | v1.0.0 | View in Storybook |