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
---
import { Chip } from "@opui/astro"
---


<Chip variant="tonal" label="Tonal" />
<Chip variant="outlined" label="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 using the start and end slots.

Tonal
Outlined 
---
import { Chip } from "@opui/astro"
---


<Chip variant="tonal">
  <svg
    slot="start"
    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>
</Chip>
<Chip variant="outlined">
  <span class="text">Outlined</span>
  <svg
    slot="end"
    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>
</Chip>
<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

---
import { Chip } from "@opui/astro"
---


<div class="example-row">
  <Chip as="button" variant="tonal" label="Tonal button" />
  <Chip as="button" variant="outlined" label="Outlined button" />
</div>
<div class="example-row">
  <Chip as="button" variant="tonal">
    <svg
      slot="start"
      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>
  </Chip>
  <Chip as="button" variant="outlined">
    <span class="text">Sort by</span>
    <svg
      slot="end"
      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>
  </Chip>
</div>
<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 
---
import { Chip } from "@opui/astro"
---


<Chip as="a" href="#" variant="tonal" label="Tonal link" />
<Chip as="a" href="#" variant="outlined">
  <span class="text">Outlined link</span>
  <svg
    slot="end"
    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>
</Chip>
<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. 
---
import { Chip } from "@opui/astro"
---


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

Anatomy

1. Container: <Chip> (renders as div, a or button)
2. Text: label prop or default slot
3. Icon (optional): <svg> element in the start or end slot

Chip example

API

Prop Type Default Description
as "div" | "a" | "button" "div" (or "a" if href present) The underlying HTML element.
label string - The text label to display.
multiline boolean false Allows multiline text.
size "small" - The size of the chip.
variant "tonal" | "outlined" "tonal" The visual variant.

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