Chips

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 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 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 are used inside inputs to behave as removable entries or tags.

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

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

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

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.