PriceTag

<PriceTag value={36} original={48} currency="USD" />

Three visual layers stacked horizontally:

Value — the current price, semibold, in primary text colour. Tabular-nums so prices align in lists.
Original — when original > value, the pre-discount price renders strike-through and muted to its right.
Sale chip — a small -N% pill in the danger soft tone, rendered only when there’s an original.

Currency formatting goes entirely through Intl.NumberFormat, so the symbol position, digit grouping, and decimals follow the supplied currency + locale.

// Multiple sizes
<PriceTag size="sm" value={18} />
<PriceTag size="md" value={28} original={36} />
<PriceTag size="lg" value={120} />
<PriceTag size="xl" value={29} />

// Different currencies
<PriceTag value={48000} currency="KRW" locale="ko-KR" />
<PriceTag value={2980} currency="JPY" locale="ja-JP" />
<PriceTag value={29.99} currency="EUR" locale="de-DE" fractionDigits={2} />

When original is set but you don’t want the chip, pass showSale={false}. The strike-through still renders.

xl is intentionally heavier (bold, tighter letter-spacing) for hero pricing on landing or pricing pages — pair with surrounding Text at size="lg" for descriptive copy.

Install: @helixui/core

import { PriceTag } from '@helixui/core'

status: stable · since: 0.7.0

Visual

Inline row of: current price (semibold, primary text) → strike-through original (muted) → small -N% chip (danger soft).

Props

Name	Type	Default	Description
`value`	`number`	—	Current price (the number actually being charged).
`original`	`number`	—	Original price. When higher than `value`, renders as a strike-through pre-discount price.
`currency`	`string`	`'USD'`	ISO 4217 currency code.
`locale`	`string`	—	BCP-47 locale used by `Intl.NumberFormat`. Defaults to runtime.
`size`	`'sm' \| 'md' \| 'lg' \| 'xl'`	`md`	Visual size. `xl` is bolded and slightly tighter for hero pricing.
`showSale`	`boolean`	`true`	Whether to render the `-N%` sale chip when `original` is supplied.
`fractionDigits`	`number`	—	Override min/max fraction digits. By default uses the currency’s locale convention.

Tokens used

color.text.primary, color.text.muted, color.text.action.danger, color.bg.action.danger.subtle, font.size.sm, font.size.md, font.size.lg, font.size.2xl, font.weight.semibold, font.weight.bold, radius.sm, space.2

Accessibility

Notes

Sale chip exposes aria-label='N% off'.
Original price exposes aria-label='Original price …' so screen readers get the discount context.
Numbers use tabular-nums so price columns align.

Composes with

Component	Relation	Note
`Card`	`contained-by`	Common in product cards.
`Sheet`	`contained-by`	Cart drawers / line items.
`Table`	`contained-by`	Pricing tables.

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

Plain price

“show $48”

<PriceTag value={48} />

Sale price

“show $36 down from $48”

<PriceTag value={36} original={48} />

Korean Won

“₩48,000 in Korean locale”

<PriceTag value={48000} currency="KRW" locale="ko-KR" />

Hero pricing

“big bold price for the pricing page”

<PriceTag value={29} size="xl" />