Chips

Chips are compact elements that represent an input, attribute, or action.

Types

Standard chip

Standard chips contain actions with a fixed width.

Custom chip

Custom chips contain actions with a variable width.

Avatar chip

Avatar chips contain actions that relate to a chosen app action and icon.

Image chip

Image chips contain actions that relate to a chosen image.

Anatomy

Chips are typically made up of multiple elements which vary based on chip type.

1. Standard chip

A. Primary text label

B. Container

C. Secondary text label (optional)

D. Icon (optional)

2. Custom chip

A. Text label

B. Container

D. Icon (optional)

3. Avatar chip

A. Text label

B. Container

C. Secondary text label (optional)

E. Avatar (optional)

4. Image chip

A. Text label

C. Secondary text label (optional)

F. Container with image background

Hierarchy

1. Primary chip

Primary chips have a distinct color fill for higher emphasis.

2. Secondary chip

Secondary chips have a subtle color fill, which gives them more emphasis than secondary invisible container chips.

3. Secondary invisible container chip

Secondary chips with invisible containers are typically used for less important actions.

Size

The following tables specify dimensions for the various chip types.

Height

Standard

Container height (52dp)

Small

Container height (32dp)

Width

Standard

Container width (fixed)

Small

Container width (variable)

Avatar Size

Small avatar icon

Use small avatar icons to display simple images, such as app icons.

Large avatar icon

Use large avatar icons to display detailed images, such as profile pictures.

Usage

Standard chip

Standard chips communicate actions that users can take and are are often used in lists.

Custom chip

Custom chips communicate actions that users can take and are most often used in Tiles.

Avatar chip

Avatar chips represent the current state or ongoing activities of an application.

Image chip

Image chips provide a richer context for an action.