Preview
525100
Usage
Props
int
required
The stock quantity to display. Values below 10 show as red (low stock), 10 or above show as green.
Behavior
Examples
Low Stock
3
Normal Stock
50
Documentation Index
Fetch the complete documentation index at: /llms.txt
Use this file to discover all available pages before exploring further.
Visual indicator for product stock levels
<x-shopper::stock-badge :stock="$product->stock" />
| Stock Value | Color | Meaning |
|---|---|---|
< 10 | Red | Low stock warning |
>= 10 | Green | Stock OK |
<x-shopper::stock-badge :stock="3" />
<x-shopper::stock-badge :stock="50" />
<table>
<tr>
<td>Product Name</td>
<td>
<x-shopper::stock-badge :stock="$product->stock" />
</td>
</tr>
</table>
@props([
'stock',
])
<span
@class([
'me-2 inline-flex rounded-full px-1.5 text-xs leading-5 font-semibold',
'bg-danger-100 text-danger-800' => $stock < 10,
'bg-success-100 text-success-800' => $stock >= 10,
])
>
{{ $stock }}
</span>