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" \| "pending" \| "primary" \| "progress" \| "review" \| "submitted" \| "success" \| "warning"`	`'default'`	Semantic color
`disabled`	`disabled`	`boolean`	`false`	Disabled state
`dot`	`dot`	`boolean`	`false`	Show a leading colour dot (status/value colour). Reflected for hydration.
`dotColor`	`dot-color`	`string \| undefined`	`—`	Colour of the leading dot (hex or any CSS colour). Reflected for hydration.
`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 / trailingIcon.
`label`	`label`	`string \| undefined`	`—`	Text label (alternative to default slot)
`removable`	`removable`	`boolean`	`false`	Show dismiss/remove button and emit coRemove on click. Reflected so it survives lazy hydration when set via a framework wrapper.
`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)
`trailingIcon`	`trailing-icon`	`string \| undefined`	`—`	Trailing icon name (prop-based, uses co-icon — any Phosphor icon name), e.g. 'caret-down'. In the `filter` variant it renders at 13px in gray-400; in other variants it inherits the chip text colour.
`valueLabel`	`value-label`	`string \| undefined`	`—`	Muted two-tone value suffix rendered right after the label as ": <valueLabel>" (e.g. label "Ordenar" + valueLabel "Reciente" → "Ordenar: Reciente"). The suffix is coloured with --co-chip-value-color (default gray-500). Omit for a plain chip.
`variant`	`variant`	`"filled" \| "filter" \| "outlined"`	`'filled'`	Visual variant. - filled/outlined = existing tag/chip looks (unchanged defaults). - filter = Cloud Drive filter-trigger pill (white pill, inset hairline ring, tinted leading icon, two-tone value, trailing caret).

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(dot)`
`::part(icon-left)`
`::part(icon-right)`
`::part(remove)`
`::part(trailing)`
`::part(value)`

CSS Custom Properties

Este componente no expone CSS custom properties.