Web Components · Order
<mmm-order-status>
Status pill with icon and progress indicator.
What it is
Compact status display — paid, fulfilled, shipped, delivered, cancelled. Renders with an icon and optional progress steps.
When to use
- Order list rows
- Header of order detail pages
Attributes
AttributeTypeDefaultDescription
data-order-idstring—The order ID this element binds to.data-show-stepsbooleanfalseShow progress steps inline.idstring—Unique element identifier.classstring—Custom CSS class list.hiddenbooleanfalseHide the element without removing it from the DOM.Examples
Default
Status pill.
<mmm-order-status data-order-id="o_123"></mmm-order-status>