Components
Price
A formatted product price with optional struck-through compare-at and a discount badge.
php artisan blatui:add price
$29.00
<x-ui.price :amount="29.00" />Sale
$29.00
was $39.00
save -26%
<x-ui.price :amount="29.00" :compare-at="39.00" />Sizes
$29.00
was $39.00
save -26%
$29.00
was $39.00
save -26%
$29.00
was $39.00
save -26%
<div class="flex flex-col items-start gap-3">
<x-ui.price :amount="29.00" :compare-at="39.00" size="sm" />
<x-ui.price :amount="29.00" :compare-at="39.00" />
<x-ui.price :amount="29.00" :compare-at="39.00" size="lg" />
</div>API Reference
Props, slots and exposed methods for
<x-ui.price>.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
amount |
number
|
0
|
The current price, formatted with two decimals and the currency symbol. |
compareAt |
number
|
— | Original price. When greater than amount, it is shown struck through and the price switches to the on-sale styling. |
currency |
string
|
'$'
|
Currency symbol prefixed to both prices. |
size |
string
|
'default'
|
Type scale of the price. The compare-at price renders one step smaller.
sm
default
lg
|
showDiscount |
bool
|
true
|
Show a "-NN%" savings badge when on sale. The percentage is computed from amount and compareAt. |