Mono

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

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