Chips are a simplified version of the @react-md/button package that can be used to represent input, attributes, or actions. Chips only have two themes by default: "solid" and "outline", but also have built-in support for rendering icons or avatars to the left and right of the chip contents.

One use-case for chips is to be used for displaying filter behavior in a compact form when checkboxes or dropdowns are not desired. A filter styled chip can be created by setting the selected prop to false or true. The default behavior will be to animate a check icon in and out of view while the selected prop changes unless the disableIconTransition prop is enabled.

To help out with accessibility, the chip will also be updated to match the toggle button specs by setting the aria-pressed prop once the selected prop is enabled.

Chips can also be used as simple action buttons. The example below will show the following behavior:

1. Adding a circular progress to the chip ("Turn on lights")
2. Triggering a sheet ("Add Alarm")
3. Cover the picture with blinds ("Close blinds")

A chip can also be used as a radio group which is named a choice chip from the material design guidelines. These sorts of chips are great if you want to create a more condensed version of a radio group to display all choices to the user.

To create a choice chip, you'll provide a selected prop just like for the filter chips but also enable an selectedThemed prop which will update the selected state to use a swatch of the primary theme color.

Chips can also be used alongside text fields or autocompletes to help show selected values. This example will show an idea for how something like this might be implemented, but it's nowhere near perfect. The email field will allow for showing a list of contacts that create chips when clicked.

Chips can also be rendered as a <span> enabling the noninteractable prop. This is really just if you would like the styles of the chip without any of the click behavior.