PriceTag

Implemented

Formatted price — locale-aware currency display. Sizes: sm/md/lg. Variants: default / strikethrough / from-prefix.

Categoryatoms

Sourcepatterns/atoms/pricetag.html

AI HintLocale-aware price formatting via Intl.NumberFormat (BCP-47 locale + ISO-4217 currency), announced as one accessible token. Variants: default, strikethrough (was-price) and from-prefix.

Monetary amount with currency-aware formatting. FR-CA: Prix formaté multidevise.

PriceTag

Display atom (Family 2 — Tier 1, placeholder)

Tier-1 placeholder. Production component ships in DS-313.

49,99 $

$29.99

42,00 €

59,99 $39,99 $

99,99 $

19,99 $

This component supports light and dark mode.

Status

Tier-1 placeholder. Production ships in DS-313.

Intended API

import { PriceTag } from '@epasslive/design-system'

<PriceTag amount={49.99} currency="CAD" locale="fr-CA" />
<PriceTag amount={49.99} currency="CAD" compareAt={69.99} />

Accessibility

The wrapper renders role="group" with an explicit French aria-label ("Prix 49,99 $ CA").

Props

Prop

Type

Default

Description

amount

number

49.99

Numeric amount.

currency

'CAD' | 'USD' | 'EUR'

CAD

ISO currency code.

locale

string

fr-CA

BCP-47 locale string.

weight

'light' | 'regular' | 'bold'

regular

Numeric weight.

compareAt

number

—

Optional compareAt price; renders as strike-through.

ariaLabel

string

—

Override the announced label.

Props

Preview

PriceTag

Prop

Type

Required

Default

Description

amount

number

Required

—

>=0

currency

string

Required

—

ISO 4217, 3 chars

locale

string

Optional

'en-CA'

Locale used for formatting and translated strings.

size

"sm" | "md" | "lg"

Optional

'md'

Visual size preset.

variant

"default" | "strikethrough" | "from-prefix"

Optional

'default'

Visual variant.

Quick use:<PriceTag />

Accessibility

ARIA roletext

Usage

Import

tsxSnippet

import { PriceTag } from "@epasslive/design-system"

Example 1

tsxSnippet

<PriceTag />

Example 2

tsxSnippet

<PriceTag variant="default" />

Anti-patterns

— Do not compose atoms directly — use molecules instead

— Avoid inline styles on atoms