Primitive / Atomstable

Chip

Compact pill-style tag for statuses and lightweight metadata.

@glinui/uiComponent: chip

Installation$

Install from the package for shared ownership or from the registry for copy-paste control.

Package Manager$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add chip

Usage$

Chip renders as a rounded-full pill shape. The tone prop controls semantic text coloring independently of the surface variant, so you can combine any visual style with any semantic meaning.

Basic$

NeutralInfoSuccessWarningDanger

TSX

1import { Chip } from "@glinui/ui"
2
3export function ChipBasicDemo() {
4return (
5  <div className="flex flex-wrap gap-2">
6    <Chip>Neutral</Chip>
7    <Chip tone="info">Info</Chip>
8    <Chip tone="success">Success</Chip>
9    <Chip tone="warning">Warning</Chip>
10    <Chip tone="danger">Danger</Chip>
11  </div>
12)
13}

Examples$

Variants$

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

DefaultGlassOutlineGhost

TSX

1import { Chip } from "@glinui/ui"
2
3export function ChipVariantDemo() {
4return (
5  <div className="flex flex-wrap gap-2">
6    <Chip variant="default">Default</Chip>
7    <Chip variant="glass">Glass</Chip>
8    <Chip variant="outline">Outline</Chip>
9    <Chip variant="ghost">Ghost</Chip>
10  </div>
11)
12}

Sizes$

SmallMediumLarge

TSX

1import { Chip } from "@glinui/ui"
2
3export function ChipSizeDemo() {
4return (
5  <div className="flex flex-wrap items-center gap-2">
6    <Chip size="sm">Small</Chip>
7    <Chip size="md">Medium</Chip>
8    <Chip size="lg">Large</Chip>
9  </div>
10)
11}

With Icons$

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

Approved

Pending

Rejected

TSX

1import { Chip } from "@glinui/ui"
2import { CheckCircle, AlertTriangle, XCircle } from "lucide-react"
3
4export function ChipIconDemo() {
5return (
6  <div className="flex flex-wrap gap-2">
7    <Chip tone="success">
8      <CheckCircle className="h-3 w-3" />
9      Approved
10    </Chip>
11    <Chip tone="warning">
12      <AlertTriangle className="h-3 w-3" />
13      Pending
14    </Chip>
15    <Chip tone="danger">
16      <XCircle className="h-3 w-3" />
17      Rejected
18    </Chip>
19  </div>
20)
21}

Combining Variant and Tone$

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

Glass InfoOutline SuccessGhost Danger

TSX

1import { Chip } from "@glinui/ui"
2
3export function ChipComboDemo() {
4return (
5  <div className="flex flex-wrap gap-2">
6    <Chip variant="glass" tone="info">Glass Info</Chip>
7    <Chip variant="outline" tone="success">Outline Success</Chip>
8    <Chip variant="ghost" tone="danger">Ghost Danger</Chip>
9  </div>
10)
11}

Accessibility$

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.

Reduced Motion$

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

API Reference$

Prop	Type	Required	Default	Description
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from chipVariants.
`tone`	`"neutral" \| "info" \| "success" \| "warning" \| "danger"`	No	`"neutral"`	Variant option from chipVariants.
`variant`	`"default" \| "glass" \| "outline" \| "ghost"`	No	`"default"`	Variant option from chipVariants.

Source$

TSX

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

packages/ui/src/components/chip.tsx

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-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

ChipProps

`ChipProps`

Prop	Type	Required	Default	Description
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from chipVariants.
`tone`	`"neutral" \| "info" \| "success" \| "warning" \| "danger"`	No	`"neutral"`	Variant option from chipVariants.
`variant`	`"default" \| "glass" \| "outline" \| "ghost"`	No	`"default"`	Variant option from chipVariants.