Chip

A small status or label chip. Slot any content inside — text, count, icon. Toggle Vue / CSS to switch the live demo and source together.

Basic

Five color variants with the default soft style.

Vue SFC

Sizes

xs, sm, md, lg, xl, xxl.

Vue SFC

Variants

Soft, solid and outline across two colors.

Vue SFC

Shapes

Pill, rounded and square corners.

Vue SFC

Dot

Status dot indicator next to the label.

Vue SFC

Icon

Slot an icon on the left or right of the label.

Vue SFC

Interactive

Clickable, selected, disabled and removable states.

Vue SFC

Link

Renders as <a> when href is set.

Vue SFC

Event: click

Listen for the mno-click event on a clickable chip.

Vue SFC

Event: toggle

Two-way binding to a clickable chip's selected state.

Vue SFC

Event: remove

Remove items from a list when their close button fires mno-close.

Vue SFC

Event: group

Multi-select chip group; clicks toggle each chip.

Vue SFC

Event log

Live log of mno-click and mno-close events.

Vue SFC

Customized

Override per-element styling with the cssClass prop (Vue) or extra utility classes (CSS).

Vue SFC

CSS Variables

Vue SFC

Every chip is themed through --mono-chip-* custom properties. Setting one on the element, on any wrapper/ancestor, or inline all work — custom properties inherit, and they pierce the shadow-DOM boundary, so the same overrides apply to <mono-chip> and the shadow build. Override a base color (e.g. --mono-chip-primary) and its soft/solid/outline/hover tints all derive from it automatically. To re-skin globally, set the underlying --theme-* tokens.

Variable	Default	Controls
--mono-chip-primary	--theme-primary	Primary chip color (soft/solid/outline derive)
--mono-chip-secondary	--theme-secondary	Secondary chip color
--mono-chip-success	--theme-success	Success chip color
--mono-chip-danger	--theme-danger	Danger chip color
--mono-chip-warning	--theme-warning	Warning chip color
--mono-chip-info	--theme-info	Info chip color
--mono-chip-teal	--theme-teal	Teal chip color
--mono-chip-purple	--theme-purple	Purple chip color
--mono-chip-neutral	--theme-neutral	Neutral chip color
--mono-chip-dark	--theme-dark	Dark chip color
--mono-chip-font-weight	--theme-font-weight-medium	Label weight

Each color also exposes --mono-chip-<color>-soft and --mono-chip-<color>-lite for the soft-fill and border/hover tints, should you want to override those independently.

Types

Importimport { MonoChipProps } from 'mono-helper'

Prop	Value	Default	Description
size	'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'	—	Sizing scale of the chip.
color	'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'teal' | 'purple' | 'dark' | 'neutral'	—	Color theme applied to the chip.
variant	'solid' | 'outline' | 'soft'	—	Visual style: soft, solid, or outline.
shape	'square' | 'pill' | 'rounded'	—	Corner style: pill, rounded, or square.
label	string	—	Text content shown inside the chip.
dot	boolean	—	Shows a status dot before the label.
removable	boolean	—	Adds a close button to remove the chip.
disabled	boolean	—	Disables interaction and dims the chip.
clickable	boolean	—	Makes the chip clickable and toggleable.
modelValue	boolean	—	Two-way bound selected state of the chip.
selected	boolean	—	Whether the chip is in the selected state.
href	string	—	Renders the chip as a link to this URL.
target	string	—	Link target when an href is set.
iconPosition	'left' | 'right'	—	Recommended JS/TS prop.
ariaLabelText	string	—	Recommended JS/TS prop.
ariaLabel	string	—	Shorter alias.
closeLabel	string	—	Recommended JS/TS prop.
cssClass	ChipCssClass	—	Per-element class overrides for internal parts.