Passer au contenu principal

Barcode

Implemented

QR (ISO/IEC 18004) or Code-128 B (ISO/IEC 15417) symbol — SVG-rendered for crisp scaling. Rendered on every issued ticket and at order lookup via the storefront QrCode facade (ConfirmationView, OrderLookupForm). Decorative when paired with text; meaningful when sole identifier.

Categoryatoms
Sourcepatterns/atoms/barcode.html
AI HintUse for atomic UI elements. Compose into molecules for complex interactions. The QR encoder auto-selects numeric (up to 255 digits), alphanumeric (0-9 A-Z space $%*+-./:, up to 154) or byte (printable ASCII, up to 106) per payload, at the smallest symbol version that fits the requested error-correction level. The Code-128 B encoder is ASCII 32..127 only — the component renders nothing (null) for unsupported or over-capacity payloads, so callers must validate before rendering.

Scannable QR (ISO/IEC 18004) or Code-128 B (ISO/IEC 15417) symbol rendered as inline SVG. Rendered on every issued ticket (confirmation and order lookup) via the storefront QrCode facade. FR-CA : « Code QR / code à barres pour billets et reçus ».

Barcode

Display atom — Ticketing family (implemented, DS-313)

Pure encoders live in ./qr.ts and ./code128.ts (framework-free, golden-tested). QR is numeric mode for digits and byte mode for printable ASCII, versions 1–5 at EC level L (up to 255 digits / 106 characters), at the smallest version that fits; Code-128 B covers ASCII 32–127. Unsupported payloads render nothing (null), so callers must validate before rendering.

0123456789012345
EPASS-2026-0001
4820193756610384(decorative — aria-hidden)

This component supports light and dark mode.

Scanner notes

The auto tone keeps the symbol maximum-contrast in both themes (dark modules on white in light mode, inverted in dark mode); the light tone forces the print direction regardless of theme. The quiet zone (4 modules for QR, 10 for Code-128) is part of the rendered SVG — never crop it and never embed the symbol inside a tight border.

Props

Prop
Type
Default
Description
value*
string
—

Encoded payload. QR mode auto-selected: digits (up to 255), alphanumeric 0-9 A-Z space $%*+-./: (up to 154) or printable ASCII (up to 106); Code-128 B: ASCII 32–127.

format
'qr' | 'code128'
qr

Symbology. QR for ticket ids; Code-128 for refund codes / share URLs.

size
number
160

Maximum visible width in CSS px; aspect ratio preserved.

ariaLabel
string
—

Required when decorative=false (WCAG 1.1.1). Describes the encoded value.

decorative
boolean
false

Hide from assistive tech when the value is announced by surrounding text.

tone
'auto' | 'light' | 'dark'
auto

Color direction; auto reads --ep-barcode-fg/-bg from the theme.

className
string
—

Additional CSS classes on the wrapping span.

style
React.CSSProperties
—

Inline style on the wrapping span.

title
string
—

Native browser tooltip; falls back to ariaLabel.

Props

Preview

Barcode

Prop
Type
Required
Default
Description
value
string
Required
—

Encoded payload. Non-empty (NASA Rule 5). QR mode is auto-selected per payload: numeric (digits, up to 255), alphanumeric (0-9 A-Z space $%*+-./:, up to 154) or byte (printable ASCII, up to 106); Code-128 B covers ASCII 32..127.

format
'qr' | 'code128'
Optional
'qr'

Symbology. Default `qr` matches the storefront's primary use case (numeric 16-digit ticket ids); `code128` for non-numeric payloads.

size
number
Optional
160

Maximum visible width in CSS pixels. Both axes scale to preserve the symbol's aspect ratio.

ariaLabel
string
Optional
—

Accessible label describing the encoded value. Required when `decorative=false`; ignored otherwise.

decorative
boolean
Optional
False

Hide the SVG from assistive tech. Use when the value is announced from surrounding text (e.g., ticket card displays the digits in a `<p>` below).

tone
'auto' | 'light' | 'dark'
Optional
'auto'

Color direction. `auto` reads `--ep-barcode-fg`/`-bg` from the current theme; `light`/`dark` force a fixed direction (useful for printable PDFs).

errorCorrection
'L' | 'M' | 'Q' | 'H'
Optional
'L'

QR only. Error-correction level: L ~7 %, M ~15 %, Q ~25 %, H ~30 % of the symbol recoverable (glare, cracks, a thumb over the code). A payload that does not fit the level's single-block versions falls back to L. A 16-digit code fits H at the same 21 × 21 size as L.

className
string
Optional
—

Additional CSS classes on the wrapping `<span>`.

style
React.CSSProperties
Optional
—

Inline style on the wrapping `<span>`.

title
string
Optional
—

Native browser tooltip. Falls back to `ariaLabel` when both are set.

Quick use:<Barcode />

Accessibility

ARIA roleimg

Type

1 rule

NASA Rule 5

value must be non-empty (NASA Rule 5)

ARIA

1 rule

WCAG 1.1.1

If decorative=false, aria-label required describing the encoded value (e.g. 'Ticket barcode 1234')

encoding

2 rules

ISO/IEC 18004

QR mode auto-selects: numeric up to 255 digits, alphanumeric (0-9 A-Z space $%*+-./:) up to 154, printable ASCII (byte) up to 106; over-capacity payloads return null (use format='code128' instead).

ISO/IEC 15417

Code-128 B encodes ASCII 32..127; throws on control characters / Latin-1.

Usage

Import

tsxSnippet
import { Barcode } from "@epasslive/design-system"

Example 1

tsxSnippet
<Barcode value="0123456789012345" ariaLabel="Ticket QR" />

Example 2

tsxSnippet
<Barcode value="EPASS-2026-0001" format="code128" ariaLabel="Ticket barcode" />

Example 3

tsxSnippet
<Barcode value="0123456789012345" decorative />

Example 4

tsxSnippet
<Barcode value="0123456789012345" ariaLabel="Print-only QR" tone="light" />

Anti-patterns

— Do not embed <Barcode /> inside an interactive element — scanners need a quiet zone of background pixels around the symbol.

— Do not theme the foreground via `text-ep-text-heading` — `--ep-barcode-fg`/`--ep-barcode-bg` always form a maximum-contrast pair in both themes for camera reliability.

— Do not feed QR mode arbitrary strings expecting them to encode — it renders nothing when the payload is empty, unsupported or over capacity (numeric 255 / alphanumeric 154 / byte 106). Use format="code128" for anything Code-128 B can carry.

Design System v4.1.0 | ePassLive