# InventoryIndicator

> Stock level indicator with urgency coloring (green/amber/red). Creates scarcity urgency.

Canonical URL: https://fa7e86e3d553:3005/islands/commerce/inventory-indicator

> Stock level indicator with urgency coloring (green/amber/red). Creates scarcity urgency. Place near BuyBox. Listens for variant:changed to update per-variant. Emits inventory:updated.

## Preview

**Category**: Commerce

## Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| variantId | string | No | - | Shopify variant ID to show stock for |
| quantity | number | No | - | Explicit stock quantity (if not using variantId fetch) |
| lowStockThreshold | number | No | 5 | Quantity threshold for "low stock" amber warning |
| urgentThreshold | number | No | 3 | Quantity threshold for "urgent" red warning |
| showExactCount | boolean | No | true | Whether to show exact quantity number vs. generic labels |
| listenForEvents | boolean | No | false | Whether to listen for variant:changed events |
| variant | enum | No | "badge" | Display style: "badge", "bar", or "text" |

## Embed Example

```html
<lx-island name="InventoryIndicator">
  <script type="application/json">
{}
  </script>
</lx-island>
```

## Usage Patterns

**Standard placement (near BuyBox, listening to variant changes):**

```html
<lx-island name="InventoryIndicator">
  <script type="application/json">
{}
  </script>
</lx-island>
```

**With runtime resolution (variantId prop):**

```html
<lx-island name="InventoryIndicator">
  <script type="application/json">
{}
  </script>
</lx-island>
```

**With explicit quantity (no fetch):**

```html
<lx-island name="InventoryIndicator">
  <script type="application/json">
{}
  </script>
</lx-island>
```

**Bar variant (progress bar style, fashion/apparel):**

```html
<lx-island name="InventoryIndicator">
  <script type="application/json">
{}
  </script>
</lx-island>
```

**Text variant (inline, minimal):**

```html
<lx-island name="InventoryIndicator">
  <script type="application/json">
{}
  </script>
</lx-island>
```

## Events

| Event | Direction | Payload |
|-------|-----------|---------|
| variant:changed | Listens | `{variantId: string}` from VariantSwatches or OptionResolver |
| inventory:updated | Emits | `{variantId: string, quantity: number, available: boolean, urgency: 'high' or 'medium' or 'low' or 'none'}` when stock changes |

## Tips

- Place directly below [BuyBox](/islands/commerce/buy-box) or beside price for urgency effect
- Set `listenForEvents:true` when using with [VariantSwatches](/islands/commerce/variant-swatches) or [OptionResolver](/islands/commerce/option-resolver) (auto-updates per variant)
- `variant:"badge"` — colored pill badge ("3 left in stock") — most common
- `variant:"bar"` — horizontal progress bar (fashion/apparel, high-end aesthetic)
- `variant:"text"` — inline text only ("Low stock") — minimal, non-intrusive
- `lowStockThreshold` (default 5) → amber/yellow warning
- `urgentThreshold` (default 3) → red urgent warning
- `showExactCount:true` → "3 left in stock" (creates urgency, use for < 10 items)
- `showExactCount:false` → "Low stock" / "In stock" (generic, use for > 10 items)
- Colors auto-adjust: green (plenty), amber (low), red (urgent), gray (out of stock)
- Emits `inventory:updated` → can trigger [StickyBar](/islands/commerce/sticky-bar) or [BuyBox](/islands/commerce/buy-box) UI changes
- Best for limited-edition, high-demand, or restocked items (don't use for always-in-stock commodity products)

## Stylable Parts

Target internal elements via `data-part` selectors in section CSS:

| Part | Description |
|------|-------------|
| `bar-fill` | Progress bar fill |
| `bar-track` | Progress bar background |
| `dot` | Status dot indicator |
| `message` | Text message |
| `root` | Outermost container |

```css
/* Example: larger progress bar */
[data-section-id='SECTION'] [data-part='bar-track'] {
  height: 0.5rem;
  border-radius: 9999px;
}
[data-section-id='SECTION'] [data-part='bar-fill'] {
  border-radius: 9999px;
}
```

## Related Islands

- [BuyBox](/islands/commerce/buy-box) — Listens to `inventory:updated` to show stock warnings
- [VariantSwatches](/islands/commerce/variant-swatches) — Emits `variant:changed` → InventoryIndicator updates per variant
- [OptionResolver](/islands/commerce/option-resolver) — Emits `variant:changed` for multi-axis products → InventoryIndicator updates
- [StickyBar](/islands/commerce/sticky-bar) — Can embed compact InventoryIndicator badge in sticky CTA