StatusBadge

Prop-driven status pill. Domain-agnostic: owns the shell and the tone class map; a feature supplies the localized label as children and picks the tone.

import { StatusBadge } from "@evolve-storefront/ui/status-badge";

Design notes

tone and status are published as attributes so a brand re-points a tone in CSS. tone is always emitted, its default included, so a selector on neutral matches without knowing it is the default. Colors are in styles.css under @layer components.

Preview

NeutralOpen in Storybook ↗

Usage

// The feature maps its own status to a tone and localizes the label.
const t = useTranslations("OrderStatus");
<StatusBadge tone={TONE[order.status]} status={order.status}>
  {t(order.status)}
</StatusBadge>;

Props

Prop	Type	Description
children	ReactNode
tone?	StatusBadgeTone	Semantic tone — a feature maps its own status → tone.
status?	string	The domain status this badge shows, published as data-status. More A feature already holds this value and used to drop it: the label is localized, so the rendered text is not a selector, and the tone is shared by every status that maps to it. Without this a brand can reach "the negative ones" but never "a returned order". Passed through verbatim — status casing mirrors the framework's GraphQL enums, so it is data-status="CANCELLED" or data-status="Cancelled" depending on the domain, and attribute selectors are case-sensitive.
data-component?	undefined	A badge's identity and its published axes are not a caller's to rename. Typed away so a call site renaming one fails to compile rather than silently shadowing the selector a brand was told to use.
data-tone?	undefined
data-status?	undefined

Any other props go to the root element, like on a plain HTML element.

Examples

Variants

<StatusBadge tone="neutral" status="OPEN">Open</StatusBadge>
<StatusBadge tone="info" status="PROCESSING">Processing</StatusBadge>
<StatusBadge tone="progress" status="IN_TRANSIT">In transit</StatusBadge>
<StatusBadge tone="positive" status="DELIVERED">Delivered</StatusBadge>
<StatusBadge tone="warning" status="LOW_STOCK">Low stock</StatusBadge>
<StatusBadge tone="negative" status="PROBLEM">Problem</StatusBadge>
<StatusBadge tone="muted" status="CANCELLED">Cancelled</StatusBadge>

Open in Storybook ↗