Works everywhere

Chip works in both server and client environments. Always use the standard import (e.g. @prokodo/ui/chip) — the library detects the runtime automatically.

Chip

Chip renders a compact, inline label. Common use cases include tags, status badges, filter pills, and selected-value indicators in form components.

Live demo →

---

Overview

import { Chip } from '@prokodo/ui/chip'

<Chip label="Published" color="success" variant="outlined" />
<Chip label="Draft" color="warning" onDelete={() => handleDelete()} />

Live PreviewOpen in Storybook ↗

---

Import

import { Chip } from "@prokodo/ui/chip"

CSS:

import "@prokodo/ui/chip.css"

---

Props

Prop	Type	Default	Required	Description
label	ReactNode	—	✅	Chip label text or node.
variant	"filled" | "outlined"	"filled"	—	Visual style variant.
color	Variants	"primary"	—	Color accent.
icon	ReactNode	—	—	Icon element rendered inside the chip.
onDelete	(e: MouseEvent<HTMLButtonElement>) => void	—	—	Delete button handler; renders delete icon.
onClick	(e: MouseEvent<HTMLDivElement>) => void	—	—	Click handler (makes chip interactive).
onKeyDown	(e: KeyboardEvent<HTMLDivElement>) => void	—	—	Keyboard handler on chip wrapper.
className	string	—	—	CSS class on root element.

See src/components/chip/Chip.model.ts for the full ChipProps type.

---

Design Tokens

Customise Chip via CSS custom properties on :root or a scoped ancestor.

Token	Default	Description
--pk-chip-radius	var(--pk-radius-pill)	Chip border radius
--pk-chip-bg	inherit	Resting chip background
--pk-chip-fg	var(--pk-color-fg)	Resting chip text color (adaptive — white in dark mode)
--pk-space-xs	—	Vertical padding
--pk-space-sm	—	Gap between label and icon/delete button
--pk-space-md	—	Horizontal padding
--pk-color-border	—	Border color in neutral outlined state
--pk-timing-normal	—	Color/shadow transition duration
--pk-color-surface-raised	—	Delete button background

Dark mode: The base chip text color is now var(--pk-color-fg), so color="inherit" chips are readable on both light and dark surfaces.
Clickable chips (onClick / onKeyDown) display a coloured ambient shadow matching their color prop; the shadow fades out on hover — identical to the Button coloured-shadow pattern.

---

WCAG 2.2 Status

Criterion	Name	Status	Note
1.3.1	Info and Relationships (A)	✅ Fulfilled	Semantic structure (headings, lists, labels, landmarks) must be conveyed programmatically via HTML or ARIA.
1.4.1	Use of Color (A)	🔍 Manual review	Color must not be the only means of conveying information (e.g. error states, required field markers).
2.1.1	Keyboard (A)	✅ Fulfilled	All functionality must be operable via keyboard alone, without requiring specific timing.
2.4.7	Focus Visible (AA)	🔍 Manual review	A visible keyboard focus indicator must be present on every interactive element. Verify against the applied product theme.
2.5.8	Target Size (Minimum) (AA)	🔍 Manual review	Interactive target areas must be at least 24 × 24 CSS pixels. Verify in the integrated product UI.
4.1.2	Name, Role, Value (A)	✅ Fulfilled	Name, role, and state of all interactive UI components must be programmatically determinable via native HTML semantics or ARIA.

Test coverage: 3 jest-axe assertion(s) across 4 test file(s) · 1 ARIA attribute occurrence(s) in source scan. Criteria marked 🔍 require manual verification in the final product integration and theme context.

Storybook

👉 Open Chip in Storybook

---

Source

src/components/chip/Chip.model.ts