Tabs

Switch between related views of the same data in a shared context. Supports label-only, label + count badge (for filters), label + notification dot, icon + label, icon-only, and icon + label + badge. Use for view filters, settings groups, or tabbed content blocks.

a11y (built in): the full APG tabs pattern is stamped by the controller — LB.Tabs applies role=tablist/tab/tabpanel and wires aria-controls + aria-labelledby from generated ids, so authors only mark the active tab with aria-selected="true". A roving tabindex keeps exactly one tab in the page tab order; ←/→ wrap around the set, Home/End jump to the ends, disabled tabs are skipped, and selection follows focus while inactive panels are toggled with the hidden attribute. Tabs are real buttons, the selected one gains an underline as well as a color change, and icon-only tabs carry aria-label with the glyph aria-hidden.

Usage: Root gets data-lb-tabs. Each tab uses aria-selected="true" on the active button; LB.Tabs supplies the rest — role, aria-controls, aria-labelledby and the roving tabindex. Icon-only tabs need aria-label on the button.

Tabs Demo

Default (label only)
Overview content. This is the first tab panel with general information about the product.
Features content. Here are the key features: responsive, accessible, themeable, and zero-dependency.
Pricing content. letbe-ds is free and open source under the MIT license.
Disabled content.
Label + count badge
3 types selected.
12 art categories selected.
99+ countries selected.
Badge is empty so it auto-hides.
Label + notification dot
Inbox — new items arrived.
Sent — all clear.
Drafts — work in progress.
Icon + label
Home content.
Settings content.
Profile content.
Icon only
Grid view content.
List view content.
Map view content.
Icon + label + badge
Inbox (12 new).
Alerts (3 unread).
Messages (99+).