Glin UI
Radix UIBase UI
Primitive / Atom

Chip

Compact pill-style tag for statuses and lightweight metadata.

Edit on GitHub
Teams2 selected

Installation

Install from
pnpm dlx @glinui/cli@latest add chip

Prefer the package?

Usage

Variants

Every vocabulary variant on the default tone. Omit variant to follow the ambient design style.

glinrsolidplainsoftoutlineghostgradient
import { Chip } from "@glinui/ui"



export function ChipVariantsDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Chip variant="glinr">glinr</Chip>
      <Chip variant="solid">solid</Chip>
      <Chip variant="plain">plain</Chip>
      <Chip variant="soft">soft</Chip>
      <Chip variant="outline">outline</Chip>
      <Chip variant="ghost">ghost</Chip>
      <Chip variant="gradient">gradient</Chip>
    </div>
  )
}

Tones and sizes

Tag chips in every tone, and three sizes.

design-systemreactaccessibilityneeds-reviewbreaking
SmallMediumLarge
import { Chip } from "@glinui/ui"



export function Demo() {
  return (
    <div className="flex w-full max-w-xl flex-col gap-4">
      <div className="flex flex-wrap items-center gap-2">
        <Chip variant="soft" tone="accent">design-system</Chip>
        <Chip variant="soft" tone="info">react</Chip>
        <Chip variant="soft" tone="success">accessibility</Chip>
        <Chip variant="soft" tone="warning">needs-review</Chip>
        <Chip variant="soft" tone="danger">breaking</Chip>
      </div>
      <div className="flex flex-wrap items-center gap-2">
        <Chip size="sm">Small</Chip>
        <Chip size="md">Medium</Chip>
        <Chip size="lg">Large</Chip>
      </div>
    </div>
  )
}

Variants

The `variant` prop controls the surface treatment, background fill, glass blur, border-only, or transparent ghost.

import { Chip } from "@glinui/ui"

export function ChipVariantDemo() {
  return (
    <div className="flex flex-wrap gap-2">
      <Chip variant="default">Default</Chip>
      <Chip variant="glass">Glass</Chip>
      <Chip variant="outline">Outline</Chip>
      <Chip variant="ghost">Ghost</Chip>
    </div>
  )
}

Sizes

import { Chip } from "@glinui/ui"

export function ChipSizeDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Chip size="sm">Small</Chip>
      <Chip size="md">Medium</Chip>
      <Chip size="lg">Large</Chip>
    </div>
  )
}

With Icons

Wrap an icon and text inside `Chip` for labeled status tags. The `rounded-full` shape accommodates inline flex children naturally.

import { Chip } from "@glinui/ui"
import { CheckCircle, Warning, XCircle } from "@phosphor-icons/react"

export function ChipIconDemo() {
  return (
    <div className="flex flex-wrap gap-2">
      <Chip tone="success">
        <CheckCircle className="h-3 w-3" />
        Approved
      </Chip>
      <Chip tone="warning">
        <Warning className="h-3 w-3" />
        Pending
      </Chip>
      <Chip tone="danger">
        <XCircle className="h-3 w-3" />
        Rejected
      </Chip>
    </div>
  )
}

Combining Variant and Tone

Mix any surface `variant` with any semantic `tone` for full compositional flexibility.

import { Chip } from "@glinui/ui"

export function ChipComboDemo() {
  return (
    <div className="flex flex-wrap gap-2">
      <Chip variant="glass" tone="info">Glass Info</Chip>
      <Chip variant="outline" tone="success">Outline Success</Chip>
      <Chip variant="ghost" tone="danger">Ghost Danger</Chip>
    </div>
  )
}

Accessibility

  • Non-interactive status label element by default.
  • Use `aria-label` when chip meaning is not explicit from text.
  • Use descriptive text that conveys meaning without relying on color alone.
  • Pair `tone` with a text label or icon label so screen readers communicate intent.
  • If the chip is interactive, wrap it in a `<button>` or use an anchor, Chip itself is a display element.
  • Avoid using Chip as the sole status indicator; supplement with accessible text where needed.

ARIA Attributes

  • `role="status"` optional for live status chips

Reduced Motion

Chip visual transitions are color-only and disabled with reduced motion.

Chip is a static display primitive with no animation. No reduced-motion considerations apply.

Affected properties

background-colorborder-colorcolor

API Reference

PropTypeRequiredDefaultDescription
variantSurfaceVariant | "default" | "primary" | "secondary" | "destructive" | "success" | "warning" | "info" | "raised" | "frosted"Noambient (glinr)Surface variant. Omit to follow the ambient design style (glinr by default, plain for minimal, glass for glass).
toneSurfaceToneNoneutralSemantic text color.
size"sm" | "md" | "lg"NomdHeight and horizontal padding scale.

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

Import

import { Chip } from "@glinui/ui"

Source Files

Dependencies

@glinui/ui

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/chip.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

ChipProps

ChipProps

PropTypeRequiredDefaultDescription
size"sm" | "md" | "lg"No--
toneSurfaceToneNo-Colour tone. Tinted faces are built with color-mix on the surface tokens.
variantSurfaceVariant | "default" | "primary" | "secondary" | "destructive" | "success" | "warning" | "info" | "raised" | "frosted"No-Visual variant. Omit for the ambient design style (glinr: raised pill with a hairline ring). Vocabulary: glinr, solid, plain, soft, outline, ghost, gradient, glass. Legacy `default` follows the ambient style.