Chips

Chips are compact group components used for quick selection, actions, and filtering.

Chips are compact interactive elements that allow users to make selections, filter content, or trigger actions. Since they mostly appear in a group, they are compact in size and come to the rescue when regular components are either too overwhelming (e.g. buttons for selection) or too underwhelming (e.g. dropdowns for applied filters).

Selection chips are used to let the users select one or many options from a group and the effect is immediate. Do not provide a single option for selection.

For example - applying filters on a page. In that case, as soon as a selection chip is clicked, the filtered results are shown.

Example of selection chips

Action chips are used when there is a group of related actions to perform. These actions are dynamic and contextual to the content. Buttons can’t be used in this case as they should be used for persistent and consistent actions only.

Example of action chips

Input chips are used inside the inputs to behave as removable entries or tags.

Example of input chips

Chips can have an optional icon on the left preceding the label.

with icon on left

Selection and input chips can have a remove button on the right of the label to remove them from a view.

Chips with remove button

Chips come in 5 states: default, hover, focus, disabled, and active states. In addition to the aforementioned states, the selection chip also has the selected-default, selected-hover, selected-focus, selected-disabled, selected-active state.

Various states of chips

Chips are used for selection/actions, quick filtering, and offering removable options whereas badges are just used for labeling entities and are not actionable.

[Left] Chip vs [Right] Badge

Selection chips generally provide an immediate response but if there is a space crunch in forms, they can replace radio and checkboxes in order to display all the available options in a compact area.

Note: In the example below using selection chips instead of radio and checkboxes saves a lot of space.

Using [Left] Selection chip vs [Right] Radio/Checkbox in forms

The number and label of action chips are contextual to the content and appear dynamically as a group of interactive elements, while buttons are expected to appear consistently and are persistent.

[Left] Action chip vs [Right] Buttons

Chips are used for simpler options whereas interactive cards are used for descriptive options that need better categorization.

Chips vs Interactive cards

Chip label is by default truncated at the width of 256px which can be customized based on the use case. The truncated label can be seen inside a tooltip on hover.

Overflow behavior in chips

Overflow behavior in chips with a custom label

Text inside the chips can be styled to highlight some information.

For example - In table, the column name and the separator in the filter chip label are highlighted using a heavier text than the text showing the value of the filter.

Configured text style in chips’ label