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.

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

Types

Importimport { MonoChipProps, MonoStatusDotProps } from 'mono-helper'

Prop	Value	Default	Description
<mono-chip>
size	'sm' | 'md' | 'lg' | 'xs'	'md'	Sizing scale of the chip.
color	'primary' | 'success' | 'danger' | 'warning' | 'info' | 'teal' | 'purple' | 'dark' | 'neutral'	'primary'	Color theme applied to the chip.
variant	'solid' | 'outline' | 'soft'	'soft'	Visual style: soft, solid, or outline.
shape	'square' | 'pill' | 'rounded'	'pill'	Corner style: pill, rounded, or square.
label	string	—	Text content shown inside the chip.
dot	boolean	false	Shows a status dot before the label.
removable	boolean	false	Adds a close button to remove the chip.
disabled	boolean	false	Disables interaction and dims the chip.
clickable	boolean	false	Makes the chip clickable and toggleable.
modelValue	boolean	false	Two-way bound selected state of the chip.
selected	boolean	false	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'	'left'	Recommended JS/TS prop.
ariaLabelText	string	—	Recommended JS/TS prop.
ariaLabel	string	—	Shorter alias.
closeLabel	string	'Remove'	Recommended JS/TS prop.
cssClass	ChipCssClass	{}	Per-element class overrides for internal parts.
<mono-status-dot>
status	'online' | 'offline' | 'busy' | 'away' | 'custom'	—	Status state controlling the dot's preset color.
state	'online' | 'offline' | 'busy' | 'away' | 'custom'	'online'	Status state controlling the dot's preset color.
pulse	boolean	false	Adds a pulsing animation to the dot.
label	string	—	Text label shown next to the dot.
color	string	—	Custom dot color for the custom state.