Barcode

atoms

QR or Code-128 barcode display — SVG-rendered for crisp scaling. Used in TicketCard and OrderConfirmation. Decorative when paired with text; meaningful when sole identifier.

ARIA Role: img

Demo

||||| | ||| || | || |||||

EPL-2026-00042

QR-EPL-2026-00042

Props

PropTypeRequiredDefaultDescription
valuestringYes—Encoded payload
decorativebooleanNoFalseIf true, aria-hidden; else aria-label required

TypeScript Interface

interface BarcodeProps {
  value: string;
  format?: 'qr' | 'code128';
  size?: number;
  ariaLabel?: string;
  decorative?: boolean;
}

Assertions (NASA Rule 5)

  • [type]value must be non-empty (NASA Rule 5)(NASA Rule 5)
  • [aria]If decorative=false, aria-label required describing the encoded value (e.g. 'Ticket barcode 1234')(WCAG 1.1.1)

Usage

Import

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

Basic

<Barcode />

With Variants

<Barcode variant="primary" size="md" />