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.


States


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



Structure of chip
PropertyValue(s)
Height24 px
Corner radius12 px

Configurations



PropertyValue(s)Default value
Label
<label>-
Icon
(optional)
<icon name>-
Clear button
  • True
  • False
  • 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