Tab item<mds-tab-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
animationenumReflects the parent tab selection animation (set by mds-tab); drives the slide-variant styling without :host-context
directionenumReflects the parent tab layout direction (set by mds-tab); drives the vertical layout without :host-context
iconPositionenumSpecifies the horizontal position of the icon displayed in the tab item
sizeenumSpecifies the size for the tab item
typeenumThe type of the tab item element
awaitawaitbooleanSpecifies if the button is awaiting for a response
disableddisabledbooleanSpecifies if the tab item is disabled or not
expandedexpandedbooleanSpecifies whether the popup the tab item opens is showing. Left unset the tab says nothing about a popup, which is what a tab that opens none has to say.
selectedselectedbooleanSpecifies if the tab item is selected or not
hrefstringTurns the tab into a link to this URL: the item renders a real anchor and is announced as a link, not as a tab, with aria-current when selected. A client-side router registered with NavigationService.setHandler() (from @maggioli-design-system/magma/services) takes the plain clicks over; without one, a click listener on the host can still cancel the navigation with preventDefault().
iconstringThe icon displayed in the tab item
labelstringThe label of the tab item
valuestringSpecifies an optional value to get from mdsTabItemSelect event
Overview
The <mds-tab-item> web component is the individual, clickable tab control of the Magma Design System, designed to be slotted into the default slot of its parent <mds-tab>. It acts as the trigger that switches the matching content-slotted panel inside the tab group.
Semantic Behavior
Compound child only: Must be a direct child of <mds-tab> placed in its default slot; it is not used standalone, and the matching panel content is added separately into the parent’s content slot (one per <mds-tab-item>, or none when the page shows the content itself). Mixing it with other child types breaks the parent’s pairing.Link item: With href the item renders a real link instead of a tab: it is announced as a link, with aria-current when selected, and the browser follows it, in a new tab on a modifier or middle click. A click listener on the item cancels the navigation with preventDefault() to route on the client; the selection still moves, except on a modifier click, which the browser opens elsewhere.Selection driven by the parent: Clicking the item emits mdsTabItemSelect; <mds-tab> sets selected on the chosen item, clears it on the others, and reveals the corresponding panel.Initial selection: Marking one item selected in markup tells the parent which tab is active on load.Focus reporting: A key press emits mdsTabItemFocus, which the parent uses to scroll the focused tab into view; both events carry { target, value } so the parent can resolve the item even with a custom id.Disabled guard: When disabled, the item cannot be selected via pointer or keyboard.Sizing managed upstream: size is pushed down from <mds-tab>, overriding the item’s own size prop.
Properties & Visual Configurations
This child does not use the shared variant/tone ladders; its props mirror the underlying <mds-button>.value: Set this to identify the tab in the mdsTabItemSelect payload (and the parent’s mdsTabChange) when you need to react to selection without relying on DOM index or id.type: Defaults to submit; pick button for a plain tab that does not interact with a surrounding form. With href the item is a link and type has no effect.icon / iconPosition: Add a leading (left, default) or trailing (right) glyph; use the trailing position for affordances like an external-link or dismiss hint.await: Reflects the button’s awaiting/loading state for tabs whose activation triggers an async operation.size: Defaults to md, but is normally controlled by the parent’s size prop, so set it on <mds-tab> for consistent sizing across all items.