Skip to main content
The Stock Badge component displays a colored badge indicating stock levels. It automatically changes color based on the stock quantity threshold.

​
Preview

525100

​
Usage

<x-shopper::stock-badge :stock="$product->stock" />

​
Props

​
stock
int
required
The stock quantity to display. Values below 10 show as red (low stock), 10 or above show as green.

​
Behavior

Stock ValueColorMeaning
< 10RedLow stock warning
>= 10GreenStock OK

​
Examples

​
Low Stock

3
<x-shopper::stock-badge :stock="3" />

​
Normal Stock

50
<x-shopper::stock-badge :stock="50" />

​
In a Table

<table>
    <tr>
        <td>Product Name</td>
        <td>
            <x-shopper::stock-badge :stock="$product->stock" />
        </td>
    </tr>
</table>

​
Blade Component Source

@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>