Guidelines

Usage

A Chip should:

Enable data input and confirm by converting it into a Chip.

Always allow users to perform a dismiss action.

Have x-tight spacing horizontal and vertical space to its neighbors when used in a group of Chips.

Size

A Chip should:

Have a fixed height of 24 pixels.

Have its width reflect the amount of content that is entered.

Not have a maximum width.

Use the same size across all viewports.

Shape

A Chip's shape impacts the overall look and feel of a layout. The shape is based on the main character and target audience of the platform or product.

A Chip should:

Use 'pill' shape when used on B2C platforms.

Use 'rectangle' shape with 4 pixels border-radius when used on B2B or B2E platforms.

States

The state of the Chip changes when the user engages with it.

A Chip should:

Have its only interactive part on the dismiss button.

Change the state of the dismiss button to hover style when the user reaches its hit area, which is at least 24x24 pixels in size.

Label

A Chip gives contextual information and is therefore using a label.

A label should:

Represent the user's input or selection.

Be available by default and never be removed from the Chip.

Display text using the Cosmos Text component.

Be fully disclosed and therefore not support truncation.

Prefix

A Chip can set a prefix when its meaning should be visually emphasized, e.g. through commonly used elements such as Flags, Icons, or Avatars.

A prefix should:

Only be used if the option where the Chip is set features a prefix as well.

Always be used in combination with a label and dismiss button.

Use a size of 16 x 16 pixels.

Use only one single non-interactive element.

Be uniform in size and ratio, when used in a group of Chips.

Use the same color as the label when it is an Icon.

Never be embedded through an iframe.

🎨 How to implement a prefix in Figma

Find a tutorial on changing prefixes in Figma, including an explanation of prefix definition and the specific sizes used in our components here.

Dismiss Button

A Chip has by default a button that triggers the dismissible action.

The button should:

Be available by default and never be removed from the Chip.

Use the Cosmos Button from kind 'bare' in the size 16x16 pixels.

Always use the cosmos-icon-close-small.

Accessibility

A Chip should:

Set a contrasting appearance based on the environment it's used in. Use 'light' appearance in dark environments and vice versa.