Chip

Chips represent compact entities such as tags and filters in a pill-shaped container that reads at a glance. For status and counts, use RuiBadge.

Try it

Usage

Choose a variant to match emphasis. Chips are presentational; pair them with RuiChipList when displaying a collection.

import { RuiChip } from '@ecopages/radiant-ui/chip';
 
<RuiChip variant="primary">Design system</RuiChip>

Variant emphasis

default suits neutral metadata. muted recedes in dense lists. primary highlights an active filter or category.

Theming

Chip variants map to semantic surface roles, never Tailwind palette steps:

Rounded shape uses the rounded-pill radius token. Set the semantic custom properties in your app's theme stylesheet, such as --surface-container-low or --primary-container, to change chip colors across the theme.

Accessibility

• Keep chip text short and self-explanatory; avoid abbreviations that need a legend.
• When chips are interactive, use a button or link with an accessible name instead of a static chip.
• Do not rely on chip color alone to convey meaning; include descriptive text.
• For status labels (Beta, Error, counts), use RuiBadge instead.

API

RuiChip is a presentational JSX view over a <span>, no custom element.

Props

CSS classes

Public BEM classes on the rendered element (documented via @cssclass on RuiChip):

Theme roles (per variant)