Nielsen Design System

Chip

Last Updated on Sep 29, 2022

Chips are labels used to describe or highlight information. They’re commonly used to indicate status. They can also contain icons which give them some ability for interaction.

View Figma Component

View MAF Storybook

View Web Components Storybook

Component Variants

Mode

SizeColorDisplay Icon

Action Icon

Label

Design Principles

Chips are compact elements. They should be concise and clearly worded. Labels should not exceed 16 characters.
Position chips close to the object they relate to. This helps clarify the information they convey.
When displaying the number of selections with an info chip, use the blurple chip. The only exception is when the # of selections is zero. Then, use gray.
A great use of info chips is whenever you need to show status, especially in a table.

Do's and Don'ts

Use to show a status update on a piece of information or action.

Use when you want to highlight something that has been added recently.

Use established color patterns to identify importance or status.

In tables, chips are excellent choices for data with limited options

Position chips so it’s clear the object it relates to.

Don’t make a chip clickable. Icons inside of chips can be.

Don’t use colorful chips haphazardly. Red should correspond to danger. Orange or yellow should correspond to warning. Green should correspond to success. Use other color colors more

Don’t use aqua chips in combination with red chips. Use the green chip instead.

Don’t add dragging to chips unless there is another way to do the same action. Dragging should always be a supplementary feature.

Table of Contents

Component Variants Design Principles Do's and Don'ts

Related Components

List