Chip

<ts-chip> vv0.4.0

The ts-chip component.

Open in Storybook for interactive demos.

Preview

<ts-chip size="md" variant="neutral">Content</ts-chip>

Properties

Property	Attribute	Type	Default	Description
disabled	disabled	boolean	false	Whether the chip is disabled.
outline	outline	boolean	false	Whether to render as outline style.
removable	removable	boolean	false	Whether the chip shows a remove button.
selected	selected	boolean	false	Whether the chip is selected.
size	size	"lg" | "md" | "sm" | "xl" | "xs"	'md'	The chip’s size.
variant	variant	"danger" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning"	'neutral'	The chip’s semantic variant.

Events

Event	Detail	Bubbles	Composed	Description
tsClick	void	Yes	Yes	Emitted when the chip body is clicked.
tsRemove	void	Yes	Yes	Emitted when the remove button is clicked.

Slots

Name	Description
*(default)*	Default slot for chip label.
prefix	Icon or content before the label.

CSS Parts

Use ::part() to style internal elements:

Part	Description
base	The chip container.
label	The label wrapper.
prefix	The prefix slot wrapper.
remove	The remove button.

ts-chip::part(base) {
  /* your custom styles */
}

Usage

HTML

<ts-chip size="md" variant="neutral">Content</ts-chip>

React

import { TsChip } from '@tessera-ui/react';

<TsChip size="md" variant="neutral">Content</TsChip>