Components

Chip

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

Chip

<Chip>
Container element. Can be a <div>, <a> or <button>.
slot="start"
Optional content at the start, such as an icon.
label
The label.
slot="end"
Optional content at the end, such as an icon.

Variants

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

Tonal

Outlined

Astro

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

<Chip variant="tonal" label="Tonal" />
<Chip variant="outlined" label="Outlined" />

Output

<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 using thestart and end slots.

Tonal

Outlined

Astro

---
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="ui-text">Tonal</span>
</Chip>
<Chip variant="outlined">
  <span class="ui-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>

Output

<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

Astro

---
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="ui-text">Open now</span>
  </Chip>
  <Chip as="button" variant="outlined">
    <span class="ui-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>

Output

<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

Astro

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

<Chip as="a" href="#" variant="tonal" label="Tonal link" />
<Chip as="a" href="#" variant="outlined">
  <span class="ui-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>

Output

<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.

Astro

---
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."
/>

Output

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

API

Chip API

Prop	Type	Default	Description
`as`	`"div"`, `"button"`, `"a"`	`"div"`	The element to render. Defaults to `"a"` with `href`.
`label`	`string`	-	The label.
`multiline`	`boolean`	`false`	Lets the label wrap to multiple lines.
`size`	`"small"`	-	The size of the element.
`variant`	`"outlined"`, `"tonal"`	`"tonal"`	The variant to use.

Slots

Slot	Description
`default`	Content placed before the label.
`end`	Optional content at the end, such as an icon.
`start`	Optional content at the start, 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

Slots

Browser support

Installation