Chip

A compact, pill-shaped <button> for tags, filters, and single-choice selections.

Installation

npm install @sipe-team/chip

import '@sipe-team/chip/styles.css';

Usage

A Chip renders a native <button> with a fully rounded, pill shape. It is primary, filled, and medium by default.

Examples

Colors

color sets the palette. All five colors are themed for the default filled variant.

Variants

filled (default) has a solid background; outline is transparent with a colored border.

Sizes

medium (default) suits most rows; small for dense layouts, large for prominent tags. Padding, font size, and height scale together.

Selected

selected switches a chip to its highlighted state — a primary chip turns cyan. Chip does not own this state, so drive it from the parent (e.g. a useState) to build filter or single-choice groups.

Disabled

The native disabled attribute is forwarded to the <button> and dims the chip to 40% opacity.

asChild

Render as a different element (e.g. a link) while keeping the chip's styles.

Link chip

Anatomy

import { Chip } from '@sipe-team/chip';

export default () => (
  <Chip color="primary" variant="filled" size="medium">
    Label
  </Chip>
);

Renders a single native <button>. With asChild, the styles and props are merged onto the child element you provide instead.

API Reference

Renders a <button> and forwards its ref.

Prop	Type	Default	Description
children	ReactNode	—	The chip label.
color	'primary' | 'secondary' | 'success' | 'warning' | 'danger'	'primary'	Color palette.
variant	'filled' | 'outline'	'filled'	Solid background vs. transparent with a colored border.
size	'small' | 'medium' | 'large'	'medium'	Padding, font size, and height.
selected	boolean	false	Highlighted state. Controlled by the parent.
asChild	boolean	false	Merge props onto the child instead of rendering a button.

Also accepts every ComponentProps<'button'> (disabled, onClick, type, …), forwarded to the rendered element.

Known limitations

• Chip hardcodes light-surface colors (from @sipe-team/tokens) rather than theme-aware tokens, so it does not adapt to this dark-only docs site. The demos above are shown on a light card so the chip renders as intended; on a dark background the outline variant's text would be illegible.
• The color × variant × selected matrix is only partially themed. selected is styled for primary/secondary filled chips and for primary/success/warning/danger outline chips; other combinations (e.g. secondary outline, or success/warning/danger filled when selected) fall back to unstyled defaults. Stick to the combinations shown above.
• Chip provides no built-in selection, toggle, or removal behavior — it is a styled <button>. Wire up onClick and drive selected yourself.