Data Display·Available inReact Vue Angular·View as Markdown

Preview

example.tsxtsx

Default

Primary

Success

Error

Warning

Info

Switch the framework picker (top-right of the panel) to render the same demo live in React, Vue, or Angular — same class names, ARIA, and visual output across all three.

Playground

Flip props to see how the component responds. The snippet below updates as you change options.

Chip

Installation

Sisyphos UI ships unified packages for React, Vue, and Angular. Pick the one that matches your stack — every framework exports the same component classes, ARIA semantics, and CSS tokens.

$ pnpm add @sisyphos-ui/react

Then import the bundled stylesheet once at app entry: import "@sisyphos-ui/react/styles.css";

Usage

Idiomatic usage in each supported framework

example.tsx

import { Chip } from "@sisyphos-ui/react";

export const Tag = () => <Chip color="primary" variant="soft">Featured</Chip>;

Variants

example.tsxtsx

Contained

Outlined

Soft

Deletable

Pass `onDelete` to render a trailing close button (separate click target).

example.tsxtsx

react

typescript

vite

tailwind

Clickable filter chips

`clickable` turns a chip into a focusable, keyboard-activatable button.

example.tsxtsx

design

frontend

backend

devops

docs

selected: design · use Enter/Space

With icons

`startIcon`/`endIcon` bracket the label. Use `radius="full"` for pill chips.

example.tsxtsx

Feature request

Approved

full radius

Both icons

Disabled

Disables clicks, delete actions, and focus.

example.tsxtsx

Disabled

Status · locked

Disabled + clickable

Disabled + onDelete

Real world — active filters

Removable filter Chips inside a Card, with a Clear all Button.

example.tsxtsx

Active filters

Status: Active

Plan: Team

Role: Admin

Region: EU

API

Prop	Type	Default	Description
variant	"contained" \| "outlined" \| "soft"	"soft"	Visual treatment.
color	"primary" \| "success" \| "error" \| "warning" \| "info"	"primary"	Semantic color token.
size	"xs" \| "sm" \| "md" \| "lg" \| "xl"	"md"	Chip size.
radius	"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "full"	"full"	Border radius; `full` renders the pill shape.
avatar	ReactNode	—	Avatar node rendered before the label (takes precedence over `startIcon`).
startIcon	ReactNode	—	Icon rendered before the label.
endIcon	ReactNode	—	Icon rendered after the label; hidden when `onDelete` is set.
onDelete	(event: MouseEvent) => void	—	When provided, renders the delete button; not fired when the chip itself is clicked.
deleteAriaLabel	string	"Remove"	Accessible label for the delete button.
clickable	boolean	false	Makes the chip itself a button (adds role, tab stop, and Enter/Space activation).
disabled	boolean	false	Disables interaction on the chip and its delete button.

The full API including refs, ARIA attributes, and HTML passthroughs lives in the package README on npm.

Accessibility

Interactive chips (clickable) expose role="button" and tabIndex={0}; non-interactive chips carry no ARIA role.
aria-disabled mirrors disabled; a disabled chip also removes the delete button from the tab order (tabIndex={-1}).
The delete control is a separate native <button> with its own aria-label (deleteAriaLabel, defaults to "Remove"), and it stops propagation so deleting never activates the chip itself.
Avatar and icon slots are marked aria-hidden="true" — only the label text is announced.

Keyboard interactions

Key	Action
`Enter`	Activates a clickable chip.
`Space`	Activates a clickable chip.
`Tab`	Moves focus between the chip and its delete button.

Need more?View on npm →