Tabs

A horizontal tab strip with sizes, color variants, three visual styles (underline / pill / ghost), optional count badges, optional SVG icons via slot, and per-item disabled state. Content panes live outside the strip — drive them off the bound model-value. Toggle Vue / CSS to switch the live demo and source together.

Basic

Three tabs with text panes that swap on click.

Vue SFC

Sizes

Small, medium and large.

Vue SFC

Colors

All built-in color variants.

Vue SFC

Variants

underline, pill and ghost.

Vue SFC

Badges

Tabs with trailing count badges.

Vue SFC

Icons

Leading SVG icons via the icon-{id} slot.

Vue SFC

Disabled

Whole-strip disabled, plus per-item disabled.

Vue SFC

Event log

Live log of mno-click events.

Vue SFC

Customized

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

Vue SFC

CSS Variables

Vue SFC

Every tab strip is themed through --mono-tabs-* 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-tabs> and the shadow build. The size and color props set presets, but an explicit --mono-tabs-* override always wins. To re-skin globally, set the underlying --theme-* tokens.

Variable	Default	Controls
--mono-tabs-accent	--theme-primary	Active tab / indicator color (set by color)
--mono-tabs-text	--theme-text	Base text color
--mono-tabs-muted	text 62%	Inactive tab text color
--mono-tabs-surface	--theme-surface	Active pill background
--mono-tabs-background	--theme-background	Pill-strip background
--mono-tabs-border	--theme-border	Underline / pill border color
--mono-tabs-pad-x	0.75rem	Tab horizontal padding (set by size)
--mono-tabs-pad-y	0.4rem	Tab vertical padding (set by size)
--mono-tabs-font	--theme-title-font-sm	Tab label font size (set by size)
--mono-tabs-gap	0.35rem	Gap between icon / label / badge (set by size)

Types

Importimport { TabsProps } from 'mono-helper'

Prop	Value	Default	Description
items	TabItem[]	—	List of tabs to render.
modelValue	string	—	Two-way bound id of the active tab.
value	string	—	Id of the active tab (kept in sync with modelValue).
size	'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'	—	Size of the tabs.
color	'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info'	—	Color theme of the tabs.
variant	'pill' | 'underline' | 'ghost'	—	Visual style of the tabs.
disabled	boolean	—	Disables interaction with all tabs.
cssClass	TabsCssClass	—	Per-part class overrides for styling internal elements.