Chips

Chips are compact elements that represent an input, attribute, or action.

Usage

Use chips to allow users to enter information, make selections, filter content, or trigger actions. Chips bring order and help users find content.

While buttons are expected to appear consistently and with familiar calls to action, chips should appear dynamically as a group of multiple interactive elements. They should always appear in a set, and can be scrolled horizontally.

From a user-flow perspective, chips represent forking paths in an experience while a button represents a linear step along a flow.

Because chips are very small pieces of content it is important to be as efficient as possible, chips must be easily understandable and recognizable at first glance.

Color usage

The Cegid Design System includes color usage for chip components. Chip components can have one of the following colors: primary, neutral or critical

Types

There are 4 types of chips in the CDS: input chips, filter chips, suggestion chips and assistive chips. They each serve a particular purpose.

Input chips

Input chips display information entered by the user, or filter options within a search field. They enable user input and verify that input by converting the text into a tag (label).

Input chips include a remove icon to allow users to undo their selections.

Placement: Input chips can be integrated with other components. They can appear: in line with the text input cursor in a field, in a stacked list, in a horizontally scrollable list. They are movable within those spaces and can be reordered.
Informational: if text input is not recognized by the system, input chips can display an error state
Editable: an input chip’s text is editable until the user takes an action with the chip, such as sending an email. To edit an input chip’s text, click on the chip

Variants:

With or without leading icon.
With or without avatar.

Filter chips

Filter chips use product-authored tags or descriptive labels to filter through list or content. They can be used as a method of filtering data, to show only items within one or more categories. Filter chips should not present only a single option.

Filter chips clearly delineate and display options in a compact area. They are a good alternative to toggle buttons or checkboxes.

Click on a chip to select it. Multiple chips can be selected or unselected. Clicking on a filter chip activates it and appends a leading checkmark icon to the starting edge of the chip label.

Placement: filter chips can be shown underneath a search field. Filter chips can wrap to a new row. If there are more than two rows, consider using horizontal scrolling to access them all.
Interaction: There are two types of interaction with the filter tags to allow for different ways to filter content using tags. (1) Single choice tags allow the selection of a single tag from a set of options. Selecting a single choice tag automatically deselects the other tags. (2) Multiple selection tags allow the selection of multiple tags from a set of options. When the user selects the tag the selection state remains on until the user clicks on the tag again to turn it off (back to the default state).

When combined with a menu, the filter chip opens a list of selectable options

Variants: With or without leading icon. Outlined or contained With or without dropdown arrow (trailing icon)

Suggestion chips

Suggestion chips are bits of product-authored information, they will help users narrow their intent by presenting dynamically generated suggestions.

Variants: With or without leading icon. Outlined or contained

Assistive chips

Assist chips can trigger an action or show progress and confirmation. They represent smart or automated actions that can span multiple apps/screens. Assist chips function as though the user asked an assistant to complete the action. They should appear dynamically and contextually in a UI. An alternative to assist chips are buttons, which should appear persistently and consistently.

-Variants: With or without leading icon With or with out avatar

Anatomy and content

Container Chip containers hold all chip elements, and their size is determined by those elements. A container can also be defined by a stroke.

Avatar button (optional)

Text Chip text can be an entity name, description, tag, action, or conversational. A short text is highly recommended. A pill should always be on one line.

Icon button (optional) or remove icon or trailing icon (optional: input & filter chips only)

General behaviour and interaction

Chips can have one of the following variants:

Contained or outlined
Selected or unselected

For more specific behaviour read above descriptions of each type of chip.

Sizes

Chip components can be either compact size or default size.

States

Chip components can have one of the following states: pressed, focused, hovered, dragged, default, error, disabled