Actions
These primitives are controls that are ideal for triggering actions, toggling settings, or filtering content.| Primitive | Definition | Status | Storybook |
|---|---|---|---|
| Action toolbar | An Action toolbar provides users with quick access to key actions relevant to a specific page, section, or data set. It appears at the bottom center of the page as a floating toolbar when items on the page are selected, most often from a Data grid. | v1.0.0 | Action toolbar in Storybook |
| 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 | Button 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 | Segmented control 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 | Toggle group 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. | v1.0.0 | Toolbar in Storybook |
Data display
These primitives help you present structured information, metrics, and content so users can scan, compare, and understand what they are looking at.| Primitive | Definition | Status | 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 | Avatar in Storybook |
| Badge | A Badge displays a label and/or icon to indicate metadata, count, status, filter, or notification. | v1.0.0 | Badge in Storybook |
| Chart | Flexible data visualizations with variants for surfacing industrial data patterns, trends, and comparisons — from asset performance to sensor readings to operational status. | v1.0.0 | Chart in Storybook |
| Code block | Formatted display of code snippets with syntax highlighting for documentation and in-product technical content. | v1.0.0 | Code block in Storybook |
| Count | Displays a formatted numeric value with optional unit and status styling for KPIs, metrics, and summarized quantities. | v1.0.0 | Count in Storybook |
| Data grid | A Data grid is a table that allows for filtering or manipulating data views. | v1.0.0 | Data grid in Storybook |
| Item | A structured row for displaying related content with consistent spacing, alignment, and optional actions. | In progress | |
| 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 | Progress in Storybook |
| 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 |
Feedback
These primitives communicate outcomes, loading, validation, and high-level product or page state so users stay informed and oriented.| Primitive | Definition | Status | Storybook |
|---|---|---|---|
| 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 | Alert 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 | |
| Banner | Banners are placed at the top of the UI to show prominent notifications or messages for the product or system, such as promotional features or connectivity issues. | v1.0.0 | Banner 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 | Empty state 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 | Page loader in Storybook |
| Skeleton | Placeholder shapes that indicate loading content before data is available, reducing layout shift and perceived wait time. | v1.0.0 | Skeleton 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 | Sonner in Storybook |
Inputs
These primitives capture user input for forms, settings, and editing workflows.| Primitive | Definition | Status | Storybook |
|---|---|---|---|
| Checkbox | Checkboxes allow users to select one or multiple options from a list. | v1.0.0 | Checkbox in Storybook |
| 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 | Combobox in Storybook |
| Date picker | Date picker allows the user to select a specific date either from a calendar or via the input. | v1.0.0 | Date picker in Storybook |
| Time picker | A visual time selector used inside date time pickers 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 | Time picker in Storybook |
| Date range picker | Lets users select a start and end date in a single control, with locale-aware formatting and validation. | v1.0.0 | Date range picker in Storybook |
| Time range picker | Lets users select a start and end time in a single control, with locale-aware formatting and validation. | v1.0.0 | Time range picker in Storybook |
| Date time range picker | Lets users select a start and end date and time in a single control, with locale-aware formatting and validation. | v1.0.0 | Date time range 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 | |
| Input | Use the Aura Input primitive for short text in forms and toolbars, with support for labels, helper text, prefixes, and validation states. | v1.0.0 | Input 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 | Radio 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 | Search 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 | Select 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. | v1.0.0 | Slider in Storybook |
| 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 | Switch in Storybook |
| Text area | 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 | Text area in Storybook |
Layout
These primitives structure pages and regions — organizing content, scrolling, separation, and application chrome.| Primitive | Definition | Status | Storybook |
|---|---|---|---|
| Accordion | An Accordion 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 | Accordion in Storybook |
| Aspect ratio | Constrains content to a fixed width-to-height ratio for media, previews, and responsive layouts. | Coming soon | |
| Card | A simple, styled container with optional header and footer content, and a flexible body content slot. | v1.0.0 | Card in Storybook |
| Collapsible | A single inline expandable block that shows or hides content when triggered. | v1.0.0 | Collapsible in Storybook |
| Menu bar | A horizontal menu bar for application-level commands and nested menus, similar to desktop application menus. | Coming soon | |
| 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 | Separator in Storybook |
| Sidebar | Primary side navigation for moving between sections, modules, or apps within a workspace. | Coming soon | |
| 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 | Topbar in Storybook |
Navigation
These primitives support orientation, hierarchy, paging, and movement through the product.| Primitive | Definition | Status | Storybook |
|---|---|---|---|
| Breadcrumb | 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 | Breadcrumb 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 | Pagination 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 | Tabs in Storybook |
Overlays
These primitives layer above the main canvas—modals, panels, menus, and tooltips—to focus attention or complete a secondary task.| Primitive | Definition | Status | 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 | Command in Storybook |
| Context menu | A menu triggered by right-click or long-press on a specific element, showing actions relevant to that context. | Coming soon | |
| Drawer | A panel that slides in from the edge of the screen for secondary tasks, filters, or detail views without leaving the current page. | Coming soon | |
| Dialog | A Dialog interrupts the main workflow to capture user attention and requires users to interact with it before they can return to the main screen. | v1.0.0 | Dialog in Storybook |
| Dropdown menu | A Dropdown menu displays a menu to the user, such as a set of actions or functions, triggered by a Button. | v1.0.0 | Dropdown menu 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 | Popover 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 | Tooltip in Storybook |
Utilities
Supporting primitives for labels, guidance, keyboard affordances, and scrollable regions.| Primitive | Definition | Status | Storybook |
|---|---|---|---|
| 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 | Helper text in Storybook |
| KBD | KBD displays keyboard shortcut indicators that give users quick access to frequently used actions or commands, improving efficiency and streamlining workflows. | v1.0.0 | KBD 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 | Label in Storybook |
| Scroll | A custom scrollable viewport for content that exceeds available space, with consistent scrollbars across browsers and platforms. | v1.0.0 | Scroll in Storybook |