Interactive testing environment for react-shared components
Current: Default
Display discount badges showing percentage or absolute amount off the original price.
Customize the PriceOff properties and see the changes in real-time.
Common use cases and variations.
Complete list of props and their descriptions.
| Prop | Type | Default | Description |
|---|---|---|---|
| amount | number | undefined | Original price amount |
| saleAmount | number | undefined | Sale price amount |
| saleType | 'percent' | 'absolute' | 'percent' | Display type: percentage off or absolute amount off |
| className | string | '' | Additional CSS classes |
The component automatically calculates the discount based on the original amount and sale amount. For percentage type, it shows the percentage off. For absolute type, it shows the dollar amount saved.
If amount or saleAmount is missing, or if there's no actual discount, the component returns null and renders nothing.
The badge uses accent2 background color with secondary foreground text. It has rounded corners and compact padding for a clean, modern look.
The "OFF" text is internationalized using the useTranslation hook, supporting multiple languages.