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 | |
|---|---|---|---|
| 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 |
| Chart | Flexible data visualizations with variants (bar, area, line, donut, radar, heat map, sparkline) for surfacing industrial data patterns, trends, and comparisons. | Coming soon | |
| Code block | Formatted display of code snippets with syntax highlighting for documentation and in-product technical content. | Coming soon | |
| Data grid | A Data grid is a table that allows for filtering or manipulating data views as well as editing individual data fields. | v1.0.0 | View in Storybook |
| List | A structured list for displaying rows of related items with consistent spacing, alignment, and optional actions. | Coming soon | |
| 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 |
| Tree view | Displays hierarchical data in a nested structure. Each row can be expanded, collapsed, selected, or dragged depending on configuration. | Coming soon |
Feedback
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 navigates away from the page. | v1.0.0 | View in Storybook |
| Alert dialog | A modal dialog that appears when a user needs to confirm or take action on a specific issue before continuing. | Coming soon | |
| Banner | 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. | 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 |
| Skeleton | Placeholder shapes that indicate loading content before data is available, reducing layout shift and perceived wait time. | 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 |
Inputs
These primitives capture user input for forms, settings, and editing workflows.| Primitive | Definition | Status | |
|---|---|---|---|
| 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. | v1.0.0 | View 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 | View in Storybook |
| Date picker | Lets users select a single date in a field with locale-aware formatting and validation. | v1.0.0 | View in Storybook |
| Time picker | A visual time selector 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 | View in Storybook |
| Date and time picker | Combined date and time selection in a single field. Display and parsing respect the user’s locale via the dateTime config provider. | v1.0.0 | View 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 | View in Storybook |
| Time range picker | Lets users select a start and end time in a single control, such as 14:00 – 16:00. | Coming soon | |
| 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 | View in Storybook |
| File upload | Allows users to upload files by dragging and dropping into the upload field or selecting files from their device. | Coming soon | |
| Input | Input is a field that allows users to enter and submit text information. | v1.0.0 | View in Storybook |
| Radio | Radio buttons allow users to select one option from a list of mutually exclusive choices. | 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 |
| 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. | v1.0.0 | View in Storybook |
| Switch | A Switch toggles a setting on or off. It represents a binary state and should update immediately when toggled. | v1.0.0 | View in Storybook |
| Text area | A Text area allows users to input and edit multiple lines of text for comments, descriptions, messages, and other longer-form content. | v1.0.0 | View in Storybook |
Layout
These primitives structure pages and regions — organizing content, scrolling, separation, and application chrome.| Primitive | Definition | Status | |
|---|---|---|---|
| Accordion | An interactive element that displays or hides sections of information. Useful where space is limited and large amounts of information must be shown in a compact, organized way. | v1.0.0 | View in Storybook |
| Aspect ratio | Constrains content to a fixed width-to-height ratio for media, previews, and responsive layouts. | Coming soon | |
| Card | A reusable container with optional header and footer and a flexible body slot 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 |
| Dropdown menu | Displays a menu of actions or options triggered by a button. Includes dropdown menus and related menu patterns. | v1.0.0 | View in Storybook |
| Menu bar | A horizontal menu bar for application-level commands and nested menus, similar to desktop application menus. | Coming soon | |
| Scroll | A custom scrollable viewport for content that exceeds available space, with consistent scrollbars across browsers and platforms. | v1.0.0 | View in Storybook |
| Separator | A one pixel thick element used to create visual separation between sections or content. Can be horizontal or vertical. | v1.0.0 | View in Storybook |
| Topbar | The persistent navigation bar at the top of every authenticated CDF and Flows custom app. Orients users and exposes global actions. | v1.0.0 | View in Storybook |
Navigation
These primitives support orientation, hierarchy, paging, and movement through the product.| Primitive | Definition | Status | |
|---|---|---|---|
| Breadcrumb | Provides a hierarchical path to help users navigate back to previous pages efficiently. | v1.0.0 | View in Storybook |
| Pagination | Helps users navigate large sets of data by dividing them into manageable pages. | v1.0.0 | View in Storybook |
| Sidebar | Primary side navigation for moving between sections, modules, or apps within a workspace. | Coming soon | |
| Tabs | Helps users organize and navigate between sections of related content without leaving the page. | v1.0.0 | View 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 | |
|---|---|---|---|
| Command | A keyboard-first search interface for finding and executing actions or navigating the application. Typically triggered by ⌘K / Ctrl+K. | v1.0.0 | View 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 modal that interrupts the main workflow to capture user attention. Requires interaction before returning to the main screen. | v1.0.0 | View in Storybook |
| Popover | Appears contextually near the trigger element for lightweight interactions or supplementary information. | v1.0.0 | View in Storybook |
| Select panel | Allows users to select one or more items and can be paired with checkboxes, reordering, or other complex selection patterns. | Coming soon | |
| Tooltip | Explains icons, buttons, links, or actions on hover or focus. | v1.0.0 | View in Storybook |
Utilities
Supporting primitives for labels, guidance, and keyboard affordances paired with form controls.| Primitive | Definition | Status | |
|---|---|---|---|
| Helper text | Supplementary text below a form field that provides guidance, constraints, or feedback. Always tied to a specific field. | v1.0.0 | View in Storybook |
| KBD | Keyboard shortcut affordances, typically shown in menus, tooltips, or documentation (e.g. Ctrl + C). | v1.0.0 | View in Storybook |
| Label | A form label that identifies an input field. Always paired with a form control. | v1.0.0 | View in Storybook |