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


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).


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.


Selection chip

Selection chips has seven states - default, hover, active, focus, disabled, selection and selection - disabled.

Interactive states of selection chip

Action chip

Action chips has seven states - default, hover, active, focus and disabled.

Interactive states of action chip

Input chip

Input chips has seven states - default, hover, focus and disabled.

Selection states of input chip


Structure of chip
Height24 px
Corner radius12 px


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


    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