Select - single
Select - multi
Step progress bar
Partial string match
Coveo’s platform design system & ionized Vapor.
Learn more about our brand, our values and our story by visiting our
Be part of the progress! Contribute to Plasma on
Icons are used to visually represent actions, functionalities, and features.
The colors that give Plasma its identity
The Typekit covers all typography styles designed specifically to work with the Plasma ecosystem.
A link is a navigational element that guides users to external resources or other sections of the product.
Spacing is the standard padding and margin size that one can adjust to customize the layout of an interface.
A blank slate informs users that a section doesn’t contain any data and provides a way to address it.
A browser preview shows the result of configuration changes in a simplified representation of a browser interface.
A chart compares sets of complex data to provide insights on their relationship and status.
A child form associates a subset of options or content to its parent option.
A collapsible allows users to hide or display a section of content.
An icon card is an element that regroups related pieces of information together. It can be either static or interactive.
An info box displays contextual information.
A limit card displays the limit and usage of a resource. It includes a bar illustrating the usage against the limit.
A modal appears over the current context to have users focus on a particular task or information.
A modal wizard guides users through a task by presenting a succession of actions to complete.
A page header informs a user of the section of the product they are currently in. It includes a breadcrumb and optional tabs.
A split layout organizes information in two vertical columns.
A table displays large quantities of items or data in a list format. Filtering features and actions may be added.
An actionable item is a dropdown menu listing actions associated with an element.
A button draws attention to an important action and initializes this action when clicked.
A set of checkboxes allow users to select multiple options from a list. A single checkbox can be used to enable/disable an option.
A code editor is a text area that allows users to edit code. A coding syntax is built in.
A color picker is a visual interface that allows users to select a color.
A Countdown illustrates how much time there is left until an end date is reached.
A date picker is a calendar interface that allows users to select a single date or a date range.
A diff viewer allows users to compare code files by showing them side by side and highlighting differences between them.
A facet is a set of options used to filter a list of content items.
A file picker is a dialog that allows users to upload a file.
A filter box allows users to enter text to filter data. It is frequently used with tables and dropdown menus.
A flat select is a group of mutually exclusive buttons aligned horizontally. It is used to allow users to switch between interface displays or binary options.
A JSON editor is a text area where users can enter and edit data in JSON format.
A multiline box allows users to provide multiple inputs for the same parameter. Each input appears on a different line.
A multi select allows users to select multiple options from a list. It is typically used when there are a large number of options.
A numeric input allows users to enter and edit numerical values, either manually or using an input stepper.
A radio button allows users to select exactly one option from a list of mutually exclusive options.
A search bar allows users to search a large set of data by entering keywords. A list of matching items is then returned.
A single select allows users to select only one option from a list. It is typically used when there are a large number of options.
A slider offers a quick and visual way for users to select a value within a given range.
A text area allows users to enter and edit longer text, often on multiple lines or in a paragraph.
A text input allows users to enter and edit short texts, such as names, emails, and passwords.
A breadcrumb is a secondary navigation that helps users to understand the hierarchy of interfaces and navigate through them.
A sidebar navigation is a primary navigation element that displays the architecture of the product’s features.
A subnavigation is a secondary vertical navigation component that allows users to navigate between sections of the same interface.
A set of tabs allows users to navigate between sections of the same interface.
A badge is a small label that displays a short yet important piece of information.
A color dot indicates the status of an item.
A “last updated” string displays the time a set of data has been last updated by a system.
A loading spinner indicates that content or data is actively being loaded.
Step Progress Bar
A step progress bar visualizes a user’s progress as they complete a task by representing the number of steps left to complete the task.
A toast displays a short message related to an action performed by a user.
A tooltip is a floating label that provides brief additional information about an interface component.