Stepper bar item<mds-stepper-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
badgebadgebooleanSpecifies if the badge status is displayed
currentcurrentbooleanSpecifies if the component is the current or not
donedonebooleanSpecifies if the component is checked or not
stepstepbooleanSpecifies if the step is displayed
iconstringSpecifies the icon displayed of the component when is not checked or the current item
iconCheckedstringSpecifies the icon displayed of the component when is checked
labelstringSpecifies a short description of the component
valuestringSpecifies the value the component will return mdsStepperBarItemSelect event
Overview
The <mds-stepper-bar-item> web component represents a single step inside a <mds-stepper-bar> progress indicator, rendering the step’s icon, optional ordinal label, descriptive text and status badge. It has no standalone meaning: it is the unit the parent stepper orchestrates to express a sequential, multi-step flow.
Semantic Behavior
Compound child only: Must be placed as a direct default-slot child of <mds-stepper-bar>; it is not used standalone or mixed with other child types in that slot.State driven by the parent: The done and current props are not set per item by the consumer - the parent’s itemsDone prop drives done/current on each child, so an item’s visual state is a function of its position relative to the active step.Index resolution: The item computes its own ordinal from its position among the parent’s children; this index feeds the localized “step N” caption rendered when step is enabled.Three-way status badge: When badge is true the item renders a status badge whose variant and localized text reflect the resolved state - success/done, info/current, or dark/queued.Icon swap on completion: The displayed icon switches from icon to iconChecked once the item is done and no longer current.No selection event: It declares mdsStepperBarItemDone (detail { value }) but never emits it, so clicking an item does not change the current step. The item is not focusable (it has no tabindex).Localization: Step, badge and status strings are localized (el/en/es/it).
Properties & Visual Configurations
Most state props are managed by the parent rather than the consumer. The props worth configuring directly on each item are:icon / iconChecked: Set icon for the default and current appearance; set iconChecked only when the completed step should show a different glyph (it defaults to icon).step: Enable to surface the auto-numbered “step N” caption above the label - use it for explicitly ordered flows where the number aids orientation.badge: Enable to show the queued/current/done status pill; prefer it when status legibility matters more than horizontal compactness.value: The token the parent collects from the completed items into the value of its mdsStepperBarChange detail (comma-joined); set it so the parent can aggregate which steps have been completed.typography: Overrides the label’s typography token (defaults to h6); lower it for denser bars.