Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

• Import path: @enadhq/enad-react-sdk/client/storefront.
• Live playground: /components/commerce/badge.

When to use it

Use Badge anywhere a product or listing needs a short status label: new arrivals, sale prices, stock state, featured picks, and limited editions. It is the standard pill element across product cards, detail pages, and listing grids.

Composition notes

Badge is a simple wrapper around children with a variant-driven color scheme:

• variant controls the color: default, sale (error color), new, out-of-stock, featured, limited, premium (accent color), and info.
• children is the label text or content inside the pill.

No slots, no compound parts. Just pick a variant and pass the label.

Behavior and theming guidance

Badge colors respond to CSS variables (--enad-text-primary-color, --enad-error-color, --enad-accent-color), so they adapt to the active theme automatically. Keep labels short (one or two words) since badges are designed for compact inline display.

Contract scope

• Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
• Public import: @enadhq/enad-react-sdk/client/storefront.
• Playground route: /sandbox?component=Badge.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes