Price

A price with compare-at and discount badge.

$29.00

import { BuiPrice } from 'ng-blatui';

<bui-price [amount]="29" />

Sale

$29.00~~was $39.00~~-26%

<bui-price [amount]="29" [compareAt]="39" />

$29.00~~was $39.00~~-26%

<bui-price [amount]="29" [compareAt]="39" size="sm" />
<bui-price [amount]="29" [compareAt]="39" size="lg" />

Prop	Type	Default	Description
`amount`	`number`	`0`	Current price amount to display.
`compareAt`	`number \| null`	`null`	Original price; when higher than amount, shows as struck-through.
`currency`	`string`	`'$'`	Currency symbol prefixed to each value.
`size`	`"default" \| "lg" \| "sm"`	`'default'`	Text size preset for the price.
`showDiscount`	`boolean`	`true`	Whether to show the percentage-off discount badge when on sale.
`locale`	`string`	—	BCP 47 locale for number formatting. Defaults to the app's `LOCALE_ID`.
`numberFormat`	`Intl.NumberFormatOptions`	`DEFAULT_NUMBER_FORMAT`	`Intl.NumberFormat` options for the amounts. Replaces the default wholesale — pass `{ style: 'currency', currency: 'EUR' }` to let ICU place the symbol itself.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.