Tab bar item<mds-tab-bar-item>Generated from @maggioli-design-system/magma@2.3.0dist/documentation.json. Encapsulation: shadow.
The first example of the Pattern page, live. Change its props below and the preview follows; Reset brings the example back as it was.
Props
typographyenumSpecifies the typography of the element
selectedselectedbooleanSpecifies if the component is selected or not
iconstringThe icon displayed in the tab bar item.
labelstringSets the label of the tab bar item
Overview
The <mds-tab-bar-item> web component is a single selectable tab within the <mds-tab-bar> container. It renders an icon stacked over a text label and acts as one option in the bar’s mutually-exclusive selection group.
Semantic Behavior
Compound child only: Must be placed as a direct default-slot child of <mds-tab-bar>; it is not used standalone or mixed with other child types.Parent-coordinated selection: Clicking the item, when becoming selected, emits mdsTabBarItemSelect carrying its own id. The parent re-drives every sibling’s selected so exactly one item is active at a time - items do not deselect each other on their own.Whole-host click target: The entire item (icon + label) is the click surface, not just the text. It has no tabindex and no ARIA role, so it is reachable by pointer only.Label is text: Set the visible text with the label prop. The default slot is a deprecated fallback kept for backward compatibility - slotted text is read into label, while nested HTML is stripped with a console warning; avoid placing HTML elements or other components there.
Properties & Visual Configurations
icon: Icon name shown above the label; use it to give the tab a recognizable glyph. Optional - defaults to empty.label: The tab’s visible text. This is the preferred and idiomatic way to set the text, matching the label prop on mds-button and other Magma components.selected: Marks this item as the active tab. You typically do not toggle it manually at runtime - the parent manages it - but you can set it on one item as the initial active tab.typography: Controls the label’s text style, constrained to the smaller typography set (tip by default, or option). Pick option for a slightly more prominent label.The active vs. resting appearance is configured through the --mds-tab-bar-item-* CSS custom properties (background and color, each with a -selected variant) listed in AGENTS.md.