Chips

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

Usage
Code

Chips are compact components that appear in a group. Since they 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).


Types


Selection chips

Selection chips are used to let the users select one or many options from a group and the effect is immediate. For example - applying filters on a page. In that case, as soon as a filter chip is clicked, the filtered results are shown.


Action chips

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


Input chips

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


Properties

PropertyValue(s)Default value
Icon
(optional)
<icon name>-
Clear button
(optional)
  • True
  • False
  • -

    Usage


    Selection chip vs radio/checkbox

    Selection chips should be used when an immediate change/result is expected on selection. Radio/checkbox should be used when an explicit action is needed to submit the selection, e.g. in a form.

    Selection chip vs radio/checkbox