Chip

When to use

• Tags on an item: “React”, “TypeScript”
• Applied filters above a list
• Metadata in a compact row

Not for a status at a glance — use a Badge.

Choosing between small labels:

Component	Use it for	For example
Badge	The status or category of something, at a glance	“Paid”, “Overdue”, “Beta”
Chip	Tags, filters and metadata, often several in a row	“React”, “Remote”, an applied filter
Kbd	A key on the keyboard, in text or a tooltip	Press ⌘ K to search

defaultaccent

import { Chip } from '@arun-dev/ui';

export default function ChipVariants() {
  return (
    <>
      <Chip>default</Chip>
      <Chip variant="accent">accent</Chip>
    </>
  );
}

Playground

TypeScript

<Chip variant="default">TypeScript</Chip>

Semantics matter more than styling

A chip is a shape, not an element. In a list it must be an li; when it is clickable it must be a real button, or it is invisible to keyboards and screen readers. render supplies the styling while you keep the right element.

• React
• TypeScript

buttonlink

import { Chip } from '@arun-dev/ui';
import { docsUrl } from '@/lib/url';

export default function ChipElements() {
  return (
    <>
      {/* A chip in a list must still be an <li>. */}
      <ul style={{ display: 'flex', gap: 'var(--space-2xs)', listStyle: 'none', padding: 0 }}>
        <Chip render={<li />}>React</Chip>
        <Chip render={<li />}>TypeScript</Chip>
      </ul>

      {/* A clickable chip must be a real button — focusable, keyboard-operable. */}
      <Chip render={<button type="button" />} onClick={() => alert('clicked')}>
        button
      </Chip>

      <Chip render={<a href={docsUrl('/components/link/')}>link</a>} variant="accent" />
    </>
  );
}

Props

Chip props

Prop	Type	Default	Description
variant	'default' | 'accent'	'default'	Neutral for tags and filters, accent for emphasis.
className	string	—	Concatenated with the component's own classes, never replacing them.
render	ReactElement	—	Element or component to render instead of the default. Props, className, event handlers and ref are merged onto it.
ref	Ref<HTMLElement>	—	Ref to the rendered element. Merged with any ref on the render element.
…rest	HTMLAttributes	—	Anything else is spread onto the rendered element, so id, aria-*, data-* and event handlers all reach the DOM.

Notes

• <Chip render={<button />}> needs type="button" on the element, or it defaults to type="submit" and will submit an enclosing form.
• Badge builds on Chip’s shape — a badge carries both chip and badge classes.