mds components
mds:discount-badge
A percentage-off pill.
25%
<mds:discount-badge :percent="25" />From two prices
Give it the amounts instead of the percentage and it works the arithmetic out.
20%
<mds:discount-badge :amount="80000" :original="100000" />Sizes
10%
25%
40%
<div class="flex items-center gap-3">
<mds:discount-badge :percent="10" size="sm" />
<mds:discount-badge :percent="25" />
<mds:discount-badge :percent="40" size="lg" />
</div>Persian output
config('mds.persian_digits') — on by default in a real app, off in these docs — renders the badge with Persian digits and the ٪ sign, and its accessible label as «۲۵ درصد تخفیف» rather than "25% off". :fa="true" does the same for a single badge.
۲۵٪
<mds:discount-badge :percent="25" :fa="true" />Reference
mds:discount-badge
| Prop | Description |
|---|---|
| percent | The percentage, when you already have it. |
| amount | Discounted price; used with original. |
| original | Pre-discount price. |
| size | Options: sm, lg. |
| fa | Persian digits and built-in strings. Default: config('mds.persian_digits'). |