Components

Chip

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

Chip

.ui-chip
Container element. Can be a <div>, <a> or <button>.
<svg>
Optional content at the start, such as an icon.
.ui-text
The label.
<svg>
Optional content at the end, such as an icon.

Variants

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

Tonal

Outlined

HTML

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

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

Icon

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

Tonal

Outlined

HTML

<div class="ui-chip ui-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="ui-text">Tonal</span>
</div>

<div class="ui-chip ui-outlined">
  <span class="ui-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

HTML

<div class="example-row">
  <button class="ui-chip ui-tonal">
    <span class="ui-text">Tonal button</span>
  </button>
  <button class="ui-chip ui-outlined">
    <span class="ui-text">Outlined button</span>
  </button>
</div>
<div class="example-row">
  <button class="ui-chip ui-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="ui-text">Open now</span>
  </button>
  <button class="ui-chip ui-outlined">
    <span class="ui-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>

Link

Tonal link Outlined link

HTML

<a href="#" class="ui-chip ui-tonal">
  <span class="ui-text">Tonal link</span>
</a>

<a href="#" class="ui-chip ui-outlined">
  <span class="ui-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.

HTML

<div class="ui-chip ui-tonal ui-small">
  <span class="ui-text">Small</span>
</div>

<div class="ui-chip ui-tonal">
  <span class="ui-text">Default</span>
</div>

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

API

Chip API

Type	Modifiers	Default	Description
Layout	`.ui-multiline`	-	Lets the label wrap to multiple lines.
Sizes	`.ui-small`	-	The size of the element.
Variants	`.ui-outlined`, `.ui-tonal`	`.ui-tonal`	The variant to use.

Parts

Part	Description
`.ui-chip`	Container element. Can be a `<div>`, `<a>` or `<button>`.
`<svg>`	Optional content at the start, such as an icon.
`.ui-text`	The label.
`<svg>`	Optional content at the end, such as an icon.

Browser support

See also the full browser support guide.

Installation

chip.css

@layer components.root {
  :where(.ui-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);

    /* Ripple effect */
    background-position: center;
    block-size: var(--size-7, 2rem);
    border: 1px solid var(--_border-color);
    border-radius: var(--radius-2, 0.5rem);
    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 */
    &.ui-tonal {
      --_bg-color: var(--surface-tonal);
      --_color: var(--text-primary);
    }

    &.ui-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 */
    &.ui-small {
      block-size: var(--size-5);
    }

    &.ui-multiline {
      block-size: auto;
    }

    &: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;
    }
  }
}

Chip

Anatomy

Variants

Icon

Button

Link

Sizes

API

Chip API

Parts

Browser support

Installation