Price Tag
DisplayFormatted currency price with optional compare-at strikethrough and discount pill.
Price TagDisplay · Web
Loading Storybook preview…
Installation
bun add @otfdashkit/ui
Usage
Import PriceTag from @otfdashkit/ui.
Code
// Price Tag — Formatted currency price with optional compare-at strikethrough and discount pill.
//
// Install:
// bun add @otfdashkit/ui
import { PriceTag } from '@otfdashkit/ui'
export function Example() {
return (
<PriceTag>
{/* your content */}
</PriceTag>
)
}Props
Props declared in the PriceTag source. Inherited HTML attributes are not listed.
| Prop | Type | Default | Description |
|---|---|---|---|
| amountrequired | number | Price in minor units (e.g. cents). | |
| compareAt | number | Original/compare-at price in minor units — renders struck-through when greater than `amount`. | |
| currency | string | 'USD' | ISO 4217 currency code. Default 'USD'. |
| locale | string | 'en-US' | BCP-47 locale for formatting. Default 'en-US'. |
| showDiscount | boolean | true | Show the "−N%" discount pill when on sale. Default true. |
| size | 'sm' | 'lg' | 'md' | 'md' | Size scale. Default 'md'. |