co-chip

Demo

Ver código

<co-chip label="Activo" color="success"></co-chip>
<co-chip label="Pendiente" color="warning" removable></co-chip>
<co-chip label="Cerrado" color="error"></co-chip>

API

Props

Prop	Atributo	Tipo	Default	Descripción
clickable	clickable	boolean	false	Make the chip clickable (emits coClick)
color	color	"default" | "error" | "info" | "primary" | "success" | "warning"	'default'	Semantic color
disabled	disabled	boolean	false	Disabled state
iconLeft	icon-left	string | undefined	—	Icon name for the left icon (prop-based, uses co-icon — any Phosphor icon name)
iconMode	icon-mode	"both" | "left" | "none"	'none'	Icon mode (for slot-based icons): - none = no icon slots - left = icon before label (Figma "1nd Icon") - both = icon before + icon after (Figma "2nd Icon")
iconRight	icon-right	string | undefined	—	Icon name for the right icon (prop-based, uses co-icon — any Phosphor icon name)
iconWeight	icon-weight	"bold" | "duotone" | "fill" | "light" | "regular" | "thin"	'regular'	Icon weight applied to prop-based iconLeft / iconRight.
label	label	string | undefined	—	Text label (alternative to default slot)
removable	removable	boolean	false	Show dismiss/remove button and emit coRemove on click
selected	selected	boolean	false	Selected / active state
shape	shape	"rounded" | "square"	'rounded'	Shape: pill or straight corners
size	size	"large" | "small"	'large'	Size: large (12px text), small (10px text)
variant	variant	"filled" | "outlined"	'filled'	Visual variant

Eventos

Evento	Detail	Bubbles	Cancelable	Descripción
coClick	void	✓	✓	Emitted when the chip body is clicked (only if clickable)
coRemove	void	✓	✓	Emitted when the remove button is clicked

Slots

Slot	Descripción
(default)	Label text
icon-left	Icon before label (1nd Icon mode)
icon-right	Icon after label (2nd Icon mode)

CSS Parts

Part	Descripción
::part(chip)
::part(icon-left)
::part(icon-right)
::part(remove)

CSS Custom Properties

Este componente no expone CSS custom properties.