Skip to main content
Github repo

Theme config

Theme mode
Color palette
Grays
Border radii/radiuses/radiopedes/you know
Border radius
Field border radius
Button border radius
Get CSS
All
Components
Guides
API
Recent
↑↓ Navigate
←→ Category
↵ Select
esc Close

Components

Chip

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

Full support Supported since v125. Full support Supported since v128. Full support Supported since v18.

Variants

The Chip has two variants: tonal (default) and .outlined.

Tonal
Outlined 
<div class="chip tonal">
  <span class="text">Tonal</span>
</div>


<div class="chip outlined">
  <span class="text">Outlined</span>
</div>

Icon

The icon can be placed before or after the text.
Make sure the text is wrapped in the .text wrapper class.

Tonal
Outlined 
<div class="chip tonal">
  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
    <path fill="currentColor"
      d="M16.25 3A3.75 3.75 0 0 1 20 6.75v9a3.75 3.75 0 0 1-2.89 3.651l2.462 1.172a.75.75 0 0 1-.55 1.392l-.095-.038L13.83 19.5h-3.661l-5.097 2.427a.75.75 0 1 1-.645-1.354L6.89 19.4A3.75 3.75 0 0 1 4 15.75v-9A3.75 3.75 0 0 1 7.75 3zM8 15a1 1 0 1 0 0 2a1 1 0 0 0 0-2m8 0a1 1 0 1 0 0 2a1 1 0 0 0 0-2m.25-10.5h-8.5A2.25 2.25 0 0 0 5.5 6.75v5.75h13V6.75a2.25 2.25 0 0 0-2.25-2.25m-3 1.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1 0-1.5z">
    </path>
  </svg>
  <span class="text">Tonal</span>
</div>


<div class="chip outlined">
  <span class="text">Outlined</span>
  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
    <path fill="currentColor"
      d="M16.25 3A3.75 3.75 0 0 1 20 6.75v9a3.75 3.75 0 0 1-2.89 3.651l2.462 1.172a.75.75 0 0 1-.55 1.392l-.095-.038L13.83 19.5h-3.661l-5.097 2.427a.75.75 0 1 1-.645-1.354L6.89 19.4A3.75 3.75 0 0 1 4 15.75v-9A3.75 3.75 0 0 1 7.75 3zM8 15a1 1 0 1 0 0 2a1 1 0 0 0 0-2m8 0a1 1 0 1 0 0 2a1 1 0 0 0 0-2m.25-10.5h-8.5A2.25 2.25 0 0 0 5.5 6.75v5.75h13V6.75a2.25 2.25 0 0 0-2.25-2.25m-3 1.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1 0-1.5z">
    </path>
  </svg>
</div>

Button

<div class="example-row">
  <button class="chip tonal">
    <span class="text">Tonal button</span>
  </button>
  <button class="chip outlined">
    <span class="text">Outlined button</span>
  </button>
</div>
<div class="example-row">
  <button class="chip tonal">
    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
      <path fill="currentColor"
        d="M29.907 5.14a1.25 1.25 0 0 1-.047 1.767l-19 18a1.25 1.25 0 0 1-1.775-.055l-6.75-7.25a1.25 1.25 0 0 1 1.83-1.704l5.89 6.327L28.14 5.093a1.25 1.25 0 0 1 1.767.047">
      </path>
    </svg>
    <span class="text">Open now</span>
  </button>
  <button class="chip outlined">
    <span class="text">Sort by</span>
    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
      <path fill="currentColor"
        d="M5.366 11.116a1.25 1.25 0 0 1 1.768 0L16 19.982l8.866-8.866a1.25 1.25 0 0 1 1.768 1.768l-9.75 9.75a1.25 1.25 0 0 1-1.768 0l-9.75-9.75a1.25 1.25 0 0 1 0-1.768">
      </path>
    </svg>
  </button>
</div>
Tonal link Outlined link 
<a href="#" class="chip tonal">
  <span class="text">Tonal link</span>
</a>


<a href="#" class="chip outlined">
  <span class="text">Outlined link</span>
  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
    <path fill="currentColor"
      d="M7.75 5.5A2.25 2.25 0 0 0 5.5 7.75v16.5a2.25 2.25 0 0 0 2.25 2.25h16.5a2.25 2.25 0 0 0 2.25-2.25v-5a1.25 1.25 0 1 1 2.5 0v5A4.75 4.75 0 0 1 24.25 29H7.75A4.75 4.75 0 0 1 3 24.25V7.75A4.75 4.75 0 0 1 7.75 3h5a1.25 1.25 0 1 1 0 2.5zM18 4.25c0-.69.56-1.25 1.25-1.25h8.5c.69 0 1.25.56 1.25 1.25v8.5a1.25 1.25 0 1 1-2.5 0V7.268l-6.366 6.366a1.25 1.25 0 1 1-1.768-1.768L24.732 5.5H19.25c-.69 0-1.25-.56-1.25-1.25">
    </path>
  </svg>
</a>

Sizes

Small
Default
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales. 
<div class="chip small">
  <span class="text">Small</span>
</div>


<div class="chip">
  <span class="text">Default</span>
</div>


<div class="chip multiline" style="max-width: 30ch;">
  <span class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales.</span>
</div>

Anatomy

1. Container: div, a or button with .chip class
2. Text: .text wrapper
3. Icon (optional): <svg> element

Chip example 
<div class="chip tonal anatomy">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
    <path
      fill="currentColor"
      d="M29.907 5.14a1.25 1.25 0 0 1-.047 1.767l-19 18a1.25 1.25 0 0 1-1.775-.055l-6.75-7.25a1.25 1.25 0 0 1 1.83-1.704l5.89 6.327L28.14 5.093a1.25 1.25 0 0 1 1.767.047"
    ></path></svg
  ><span class="text">Chip example</span>
</div>

API

Type Modifiers Default Description
Container .chip, a.chip, button.chip - Container element type.
Children & > .text, & > svg - Optional child content.
Sizes .small, default, .multiline - The size of the element.
Variants .tonal, .outlined .tonal The variant to use.

Browser support

Full support Supported since v125. Full support Supported since v128. Full support Supported since v18.

See also the full browser support guide.

Installation

@layer components.root {
  :where(.chip) {
    --_bg-color: var(--surface-tonal);
    --_border-color: var(--border-color);
    --_color: var(--text-primary);


    align-items: center;
    background: var(--_bg-color) var(--ripple, none);
    block-size: var(--size-7, 2rem);
    border-radius: var(--radius-2, 0.5rem);
    border: 1px solid var(--_border-color);
    color: var(--_color);
    display: inline-flex;
    font-size: var(--font-size-0, 0.75rem);
    gap: var(--size-1);
    padding-inline: var(--size-2);
    text-decoration: none;


    /* Variants */
    &.tonal {
      --_bg-color: var(--surface-tonal);
      --_color: var(--text-primary);
    }


    &.outlined {
      --_bg-color: var(--surface-default);
      --_color: var(--text-primary);
    }


    &:where(button, a):where(:not([disabled])) {
      &:where(:not(:active)):hover {
        --_bg-color: light-dark(oklch(from var(--surface-tonal) calc(l * 0.98) c h),
            oklch(from var(--surface-tonal) calc(l * 1.1) c h));
      }
    }


    /* Icon */
    &:has(svg:first-child) {
      padding-inline: var(--size-1) var(--size-2);
    }


    &:has(svg:last-child) {
      padding-inline: var(--size-2) var(--size-1);
    }


    &:has(svg) {
      svg {
        flex-shrink: 0;
        inline-size: var(--size-3);
      }
    }


    /* Sizes */
    &.small {
      block-size: var(--size-5);
    }


    &.multiline {
      block-size: auto;
    }


    /* Ripple effect */
    background-position: center;


    &:where(:not([disabled])) {
      &:where(:not(:active):hover) {
        --ripple: radial-gradient(circle, transparent 1%, var(--_bg-color) 1%) center/15000%;


        transition: background var(--button-ripple-duration);
      }


      &:where(:hover:active) {
        background-size: var(--button-ripple-size);
        transition: background 0s;
      }
    }


    /* Disabled */
    &:where([disabled]) {
      opacity: 0.64;
      --_color: color-mix(in oklch,
          var(--text-muted) 50%,
          var(--surface-default));
      cursor: not-allowed;
    }
  }
}