ProductStockBadge
Visual stock status indicator with colored dot and label
Import
import { ProductStockBadge } from '@tallyui/components';Usage
<ProductStockBadge doc={productDocument} />
<ProductStockBadge doc={productDocument} showQuantity />Renders a pill-shaped badge with status-appropriate colors:
- In Stock —
bg-success/15 text-success - Out of Stock —
bg-danger/15 text-danger - On Backorder —
bg-warning/15 text-warning - Unknown —
bg-muted/15 text-muted
Props
| Prop | Type | Default | Description |
|---|---|---|---|
doc | any | required | RxDB product document |
showQuantity | boolean | false | Show quantity alongside status |
className | string | — | Override badge container styles |
Trait mapping
| Connector | Stock status source | Quantity source |
|---|---|---|
| WooCommerce | doc.stock_status | doc.stock_quantity |
| Medusa | Derived from variant.manage_inventory / inventory_quantity | doc.variants[0].inventory_quantity |
| Shopify | Derived from variant.inventory_management / inventory_policy / inventory_quantity | doc.variants[0].inventory_quantity |
| Vendure | variant.stockLevel string (IN_STOCK, OUT_OF_STOCK, LOW_STOCK) | doc.variants[0].stockOnHand (Admin API only) |