A chip may contain entities such as a photo, text, rules, an icon, or a contact.
Contact chips may represent contact information in a compact way.
A chip may contain a photo, short title, and brief information.
Chips can be used for various types of entities, including free form text, predefined text, rules, or contacts. Chips may also contain icons.
Chips with text
Chip label
Chips with text and an icon
Touching a chip opens a full detailed view (either in a card or full screen) or a menu of options related to that chip.
Chips can be deletable or non-deletable. Display a delete icon if a chip is deletable.
Users may press the delete icon or use the keyboard “Delete” button to remove a chip.
Contact information that users have for people may be represented in a compact way using contact chips. The chips are invoked and inserted into a text field (usually the “To” field) when the user starts typing a contact’s name, sees the contact’s addresses, and selects the correct one. Contact chips can be added directly to a text field from a menu of contacts.
Contact chips efficiently confirm that the user will be sending their message to the correct person.
The user confirms the name(s) of the email recipient(s) on the contact chips.
The user confirms which email address to select on the contact chip.
The contact chip has different states: Normal, Focused, Pressed, and Activated.
Deletable chip
Height: 32dp
Label left padding: 12dp
Remove icon
Size: 24dp x 24dp
Color & opacity: 54% black
Margin: 4dp
On desktop, the “Remove” icon is persistent.
Non-deletable chip
Height: 32dp
Label left and right padding: 12dp
Contact chip
Height: 32dp
Label left padding: 8dp
Label right padding: 12dp
Contact chip
Height: 32dp
Title top, bottom, and left padding: 8dp
Title right padding: 12dp
Focused and activated contact chip
Height: 40dp
Top and bottom padding: 16dp
Unfocused contact chips
Top and bottom padding: 20dp