Chip

A small, colorful text element that can represent a tag, filter, or badge.

Color

To set the color of a Chip, add one of the following classes:

cd-color-brand (default)
cd-color-red
cd-color-orange
cd-color-yellow
cd-color-green
cd-color-teal
cd-color-blue
cd-color-purple
cd-color-pink
cd-color-gray
cd-color-black
cd-color-white

Brand

Red

Orange

Yellow

Green

Teal

Blue

Purple

Pink

Gray

Black

White

<div class="cd-chip">Brand</div>
<div class="cd-color-red cd-chip">Red</div>
<div class="cd-color-orange cd-chip">Orange</div>
<div class="cd-color-yellow cd-chip">Yellow</div>
<div class="cd-color-green cd-chip">Green</div>
<div class="cd-color-teal cd-chip">Teal</div>
<div class="cd-color-blue cd-chip">Blue</div>
<div class="cd-color-purple cd-chip">Purple</div>
<div class="cd-color-pink cd-chip">Pink</div>
<div class="cd-color-gray cd-chip">Gray</div>
<div class="cd-color-black cd-chip">Black</div>
<div class="cd-color-white cd-chip">White</div>

Subtle Color Scheme

Chips also support a subtle color scheme that uses a lighter background and darker text.

To use the subtle color scheme, add the cd-variant-subtle class in addition to the color class.

Note that black and white Chips do not have subtle versions, so this class has no effect when used with those colors.

Brand

Red

Orange

Yellow

Green

Teal

Blue

Purple

Pink

Gray

<div class="cd-chip cd-variant-subtle">Brand</div>
<div class="cd-color-red cd-chip cd-variant-subtle">
  Red
</div>
<div class="cd-color-orange cd-chip cd-variant-subtle">
  Orange
</div>
<div class="cd-color-yellow cd-chip cd-variant-subtle">
  Yellow
</div>
<div class="cd-color-green cd-chip cd-variant-subtle">
  Green
</div>
<div class="cd-color-teal cd-chip cd-variant-subtle">
  Teal
</div>
<div class="cd-color-blue cd-chip cd-variant-subtle">
  Blue
</div>
<div class="cd-color-purple cd-chip cd-variant-subtle">
  Purple
</div>
<div class="cd-color-pink cd-chip cd-variant-subtle">
  Pink
</div>
<div class="cd-color-gray cd-chip cd-variant-subtle">
  Gray
</div>

Clickable

To make a Chip clickable, add the cd-is-clickable class. In this case, it's also a good idea to use a button element for the Chip itself.

<button class="cd-chip cd-is-clickable">Brand</button>
<button class="cd-chip cd-is-clickable cd-color-red">
  Red
</button>
<button class="cd-chip cd-is-clickable cd-color-orange">
  Orange
</button>
<button class="cd-chip cd-is-clickable cd-color-yellow">
  Yellow
</button>
<button class="cd-chip cd-is-clickable cd-color-green">
  Green
</button>
<button class="cd-chip cd-is-clickable cd-color-teal">
  Teal
</button>
<button class="cd-chip cd-is-clickable cd-color-blue">
  Blue
</button>
<button class="cd-chip cd-is-clickable cd-color-purple">
  Purple
</button>
<button class="cd-chip cd-is-clickable cd-color-pink">
  Pink
</button>
<button class="cd-chip cd-is-clickable cd-color-gray">
  Gray
</button>
<button class="cd-chip cd-is-clickable cd-color-black">
  Black
</button>
<button class="cd-chip cd-is-clickable cd-color-white">
  White
</button>

<button class="cd-chip cd-is-clickable cd-variant-subtle">
  Brand
</button>
<button
  class="cd-chip cd-is-clickable cd-color-red cd-variant-subtle"
>
  Red
</button>
<button
  class="cd-chip cd-is-clickable cd-color-orange cd-variant-subtle"
>
  Orange
</button>
<button
  class="cd-chip cd-is-clickable cd-color-yellow cd-variant-subtle"
>
  Yellow
</button>
<button
  class="cd-chip cd-is-clickable cd-color-green cd-variant-subtle"
>
  Green
</button>
<button
  class="cd-chip cd-is-clickable cd-color-teal cd-variant-subtle"
>
  Teal
</button>
<button
  class="cd-chip cd-is-clickable cd-color-blue cd-variant-subtle"
>
  Blue
</button>
<button
  class="cd-chip cd-is-clickable cd-color-purple cd-variant-subtle"
>
  Purple
</button>
<button
  class="cd-chip cd-is-clickable cd-color-pink cd-variant-subtle"
>
  Pink
</button>
<button
  class="cd-chip cd-is-clickable cd-color-gray cd-variant-subtle"
>
  Gray
</button>

Links as Clickable Chips

Clickable Chips can be links instead of buttons.

Clickable link

<a href="#" class="cd-chip cd-is-clickable"
  >Clickable link</a
>

Deletable

To make a Chip deletable, add a button element inside the Chip with the class cd-dismiss-button.

Brand

Red

Orange

Yellow

Green

Teal

Blue

Purple

Pink

Gray

Black

White

Brand

Red

Orange

Yellow

Green

Teal

Blue

Purple

Pink

Gray

<div class="cd-chip">
  Brand
  <button class="cd-dismiss-button" title="Delete"></button>
</div>
<div class="cd-color-red cd-chip">
  Red
  <button class="cd-dismiss-button" title="Delete"></button>
</div>
<div class="cd-color-orange cd-chip">
  Orange
  <button class="cd-dismiss-button" title="Delete"></button>
</div>
<div class="cd-color-yellow cd-chip">
  Yellow
  <button class="cd-dismiss-button" title="Delete"></button>
</div>
<div class="cd-color-green cd-chip">
  Green
  <button class="cd-dismiss-button" title="Delete"></button>
</div>
<div class="cd-color-teal cd-chip">
  Teal
  <button class="cd-dismiss-button" title="Delete"></button>
</div>
<div class="cd-color-blue cd-chip">
  Blue
  <button class="cd-dismiss-button" title="Delete"></button>
</div>
<div class="cd-color-purple cd-chip">
  Purple
  <button class="cd-dismiss-button" title="Delete"></button>
</div>
<div class="cd-color-pink cd-chip">
  Pink
  <button class="cd-dismiss-button" title="Delete"></button>
</div>
<div class="cd-color-gray cd-chip">
  Gray
  <button class="cd-dismiss-button" title="Delete"></button>
</div>
<div class="cd-color-black cd-chip">
  Black
  <button class="cd-dismiss-button" title="Delete"></button>
</div>
<div class="cd-color-white cd-chip">
  White
  <button class="cd-dismiss-button" title="Delete"></button>
</div>
<div class="cd-chip cd-variant-subtle">
  Brand
  <button class="cd-dismiss-button" title="Delete"></button>
</div>
<div class="cd-color-red cd-chip cd-variant-subtle">
  Red
  <button class="cd-dismiss-button" title="Delete"></button>
</div>
<div class="cd-color-orange cd-chip cd-variant-subtle">
  Orange
  <button class="cd-dismiss-button" title="Delete"></button>
</div>
<div class="cd-color-yellow cd-chip cd-variant-subtle">
  Yellow
  <button class="cd-dismiss-button" title="Delete"></button>
</div>
<div class="cd-color-green cd-chip cd-variant-subtle">
  Green
  <button class="cd-dismiss-button" title="Delete"></button>
</div>
<div class="cd-color-teal cd-chip cd-variant-subtle">
  Teal
  <button class="cd-dismiss-button" title="Delete"></button>
</div>
<div class="cd-color-blue cd-chip cd-variant-subtle">
  Blue
  <button class="cd-dismiss-button" title="Delete"></button>
</div>
<div class="cd-color-purple cd-chip cd-variant-subtle">
  Purple
  <button class="cd-dismiss-button" title="Delete"></button>
</div>
<div class="cd-color-pink cd-chip cd-variant-subtle">
  Pink
  <button class="cd-dismiss-button" title="Delete"></button>
</div>
<div class="cd-color-gray cd-chip cd-variant-subtle">
  Gray
  <button class="cd-dismiss-button" title="Delete"></button>
</div>

Clickable & Deletable

To make a Chip both clickable and deletable, you'll need to make some adjustments to the markup to avoid nesting buttons inside other buttons, which is an accessibility problem.

To make a Chip both clickable and deletable, use a div with the cd-is-clickable class for the Chip itself. Inside, place the label text inside a button element with the cd-chip-label class, followed by the same dismiss button markup as in the example above. These two buttons must be next to each other in the markup, not nested.

Attach your onclick handlers to the two inner buttons, not the outer div.

<div class="cd-chip cd-is-clickable">
  <button
    onclick="alert('Chip clicked')"
    class="cd-chip-label"
  >
    Chip text goes here
  </button>
  <button
    onclick="alert('Delete clicked')"
    class="cd-dismiss-button"
    title="Delete"
  ></button>
</div>

Clickable & Deletable Link

Below is an example of a Chip that is both clickable and deletable, using a link for the clickable part instead of a button.

The same rules apply as in the previous example: since links count as interactive elements, they shouldn't contain buttons, so we use the cd-chip-label element as our link.

Chip text goes here

<div class="cd-chip cd-is-clickable">
  <a href="#" class="cd-chip-label">Chip text goes here</a>
  <button
    onclick="alert('Delete clicked')"
    class="cd-dismiss-button"
    title="Delete"
  ></button>
</div>

A Note on the Chip Label

Wrapping the content of a Chip in an element with the cd-chip-label class is required for Chips that are both clickable and deletable, and optional in all other cases.

Below are some examples of Chips with and without the cd-chip-label class. They should look and function identically.

Standard chip with chip-label

Standard chip without chip-label

Deletable chip with chip-label

Deletable chip without chip-label

<div class="cd-chip cd-color-blue">
  <span class="cd-chip-label">
    Standard chip with chip-label
  </span>
</div>
<div class="cd-chip cd-color-blue">
  Standard chip without chip-label
</div>
<div class="cd-chip cd-is-clickable cd-color-green">
  <button class="cd-chip-label">
    Clickable chip with chip-label
  </button>
</div>
<button class="cd-chip cd-is-clickable cd-color-green">
  Clickable chip without chip-label
</button>
<div class="cd-chip cd-color-orange">
  <span class="cd-chip-label">
    Deletable chip with chip-label
  </span>
  <button class="cd-dismiss-button" title="Delete"></button>
</div>
<div class="cd-chip cd-color-orange">
  Deletable chip without chip-label
  <button class="cd-dismiss-button" title="Delete"></button>
</div>