TabBar | Tuff Docs

Usage

Loading demo...

indicator sets how the slider behind the active item is drawn; size switches between sm, md, and lg.

Loading demo...

Keep three to five primary destinations, within reach of a thumb.
Use stable primitive values that map cleanly to routes or view keys.
Turn off fixed and safeAreaBottom inside previews, modals, and custom shells, or the bar pins to the real viewport bottom.
Keep badge short: a number or compact status text.
Don't nest interactive controls in labels; each item is already a button.

Prop	Type	Default	Description
`modelValue`	`string \| number`	`''`	Active value (`v-model`).
`items`	`TabBarItem[]`	`[]`	Items, rendered left to right.
`indicator`	`'none' \| 'pill' \| 'line' \| 'block' \| 'dot'`	`'pill'`	Sliding indicator: color only, a raised surface, a top rule, a tint, or a dot.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size tier; height, icon, label, and inset ship as inline CSS variables.
`fixed`	`boolean`	`true`	Pins the bar to the viewport bottom with `position: fixed`.
`safeAreaBottom`	`boolean`	`true`	Renders an `env(safe-area-inset-bottom)` spacer below the items.
`disabled`	`boolean`	`false`	Disables every item and blocks value updates.
`zIndex`	`number`	`2000`	Stacking level, written to `--tx-tab-bar-z-index`.

Event	Payload	Description
`update:modelValue`	`TabBarValue`	The picked item's value (`v-model`).
`change`	`TabBarValue`	Fires with the same value after an enabled item is picked.

TabBarItem, one entry of items:

Field	Type	Description
`value`	`string \| number`	Value emitted on selection.
`label`	`string`	Visible label.
`iconClass`	`string`	Icon class shown above the label.
`badge`	`string \| number`	Badge on the icon; `null`, `undefined`, and empty strings are hidden.
`disabled`	`boolean`	Disables only this item.

The root is a <nav> landmark, not a tab widget, so it has no role="tablist". Each item is a <button>, and the active one has aria-current="page".
The indicator is measured by useIndicatorBox, as in TxSidebarNav; a ResizeObserver re-measures after a resize or font swap.
Only a new selection travels. The first measurement, a resize, a font swap, and a change of size or indicator land in place, as does every change under reduced motion.
The indicator never scales and lengthens only along the bar on the way; at either end it stops at the edge, so an overflow: hidden frame never clips it.
Picking a disabled item, or any item while disabled, emits nothing; picking the active item still emits update:modelValue and change.
Each size value is a CSS variable you can override on its own, such as --tx-tab-bar-height; an unknown size falls back to md.

The indicator runs on the glide material of useJellyIndicator, shared with TxTabs, TxFlatRadio, and TxSidebarNav, and writes styles every frame without re-rendering.
Source: packages/tuffex/packages/components/src/tab-bar/.

packages/tuffex/packages/components/src/tab-bar/index.ts