Lucent UI
← IconChipAvatar →
✦ LLM-ready

Chip

atom

Status-first label primitive. Supports dismissible, clickable, and selectable modes with swatch, dot, leftIcon, borderless, ghost, and pulse options. Dot-only mode (omit children with dot) renders a compact circular indicator. Available in three sizes and six semantic variants. Heights scale with spacing tokens.

"Add a list of Chip components from lucent-ui for filter tags. Support dismiss and click-to-select. Use ghost chips for inline table statuses and dot-only with pulse for live indicators."

Usage

React / JSX
import { Chip } from 'lucent-ui'

<Chip variant="neutral" size="md">Chip</Chip>

Installation

pnpm add lucent-ui

API Reference

Chip props — * required

PropTypeDefaultDescription
childrenReact.ReactNode—Chip label. Optional — omit with dot to render a dot-only indicator.
variant"neutral" | "accent" | "success" | "warning" | "danger" | "info""neutral"Semantic colour variant. The accent variant uses a solid accent background with hue-tinted accentFg foreground color.
size"sm" | "md" | "lg""md"Chip size. Heights scale with spacing tokens.
onDismiss() => void—If provided, renders a dismiss (×) button for removable chips.
onClick() => void—Makes the chip clickable — renders as a button element.
leftIconReact.ReactNode—Icon or element rendered before the label (emoji, flags, avatars).
swatchstring—Hex color rendered as a small dot before the label for color-coded categories.
dotbooleanfalseStatus dot rendered before the label using the variant color. When used without children, renders a compact circular dot-only indicator.
pulsebooleanfalsePulsing ring animation on the status dot for live/in-progress states (deploying, syncing, live incident). Only applies when dot is true. Uses injected @keyframes lucent-chip-pulse.
ghostbooleanfalseTransparent background with text color only, no border. Subtle 8% tint on hover when interactive. Ideal for inline status indicators in tables and lists.
borderlessbooleanfalseRemoves the border for a softer filled-only appearance.
disabledbooleanfalsePrevents interaction.