Chips
Chips are compact elements that represent an input, attribute, or action.
Chips allow users to enter information, make selections, filter content, or trigger actions.
While included here as a standalone component, the most common use will be in some form of input, so some of the behaviour demonstrated here is not shown in context.
Chip
Examples of Chips, using an image Avatar, SVG Icon Avatar, "Letter" and (string) Avatar.
- Chips with the
onClickproperty defined change appearance on focus, hover, and click. - Chips with the
onDeleteproperty defined will display a delete icon which changes appearance on hover.
Basic Chip
MB
Clickable Chip
Clickable Deletable Chip
Clickable Deletable Chip
Custom delete icon Chip
Clickable Link ChipMB
Primary Clickable ChipPrimary Clickable Chip
Deletable Primary Chip
Deletable Secondary Chip
Deletable Secondary Chip
Basic Chip
MB
Clickable ChipClickable Deletable Chip
Clickable Deletable Chip
Custom delete icon Chip
Clickable Link ChipMB
Primary Clickable ChipPrimary Clickable Chip
Deletable Primary Chip
Deletable Secondary Chip
Deletable Secondary Chip
Chip array
An example of rendering multiple Chips from an array of values.
Deleting a chip removes it from the array. Note that since no
onClick property is defined, the Chip can be focused, but does not
gain depth while clicked or touched.
Basic Chip
MB
Clickable ChipClickable Deletable Chip
Clickable Deletable Chip
Custom delete icon Chip
Clickable Link ChipMB
Primary Clickable ChipPrimary Clickable Chip
Deletable Primary Chip
Deletable Secondary Chip
Deletable Secondary Chip
Basic Chip
MB
Clickable ChipClickable Deletable Chip
Clickable Deletable Chip
Custom delete icon Chip
Clickable Link ChipMB
Primary Clickable ChipPrimary Clickable Chip
Deletable Primary Chip
Deletable Secondary Chip
Deletable Secondary Chip
Chip Component
<Chip />