Lily Design System™

BarcodeImage

A barcode-image is a visual machine-readable symbolic code image, such as a 1D linear barcode-image (UPC, EAN, Code 128) or a stacked symbology rendered as a flat image and scanned by a hardware or camera-based scanner. Typical uses include retail SKUs, inventory tracking, patient wristbands, shipping labels, ticket scanning, and library catalogs.

This headless component renders a standard <img> element with class barcode-image whose src attribute carries the barcode-image image. Required alt text describes what the barcode-image encodes.

Example

Order number 12345
Show demo markup 
<img class="barcode-image" src="data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%2240%22%3E%3Crect width=%22160%22 height=%2240%22 fill=%22white%22/%3E%3Cg fill=%22black%22%3E%3Crect x=%224%22 width=%222%22 height=%2240%22/%3E%3Crect x=%2210%22 width=%221%22 height=%2240%22/%3E%3Crect x=%2214%22 width=%223%22 height=%2240%22/%3E%3Crect x=%2220%22 width=%221%22 height=%2240%22/%3E%3Crect x=%2224%22 width=%222%22 height=%2240%22/%3E%3Crect x=%2230%22 width=%224%22 height=%2240%22/%3E%3Crect x=%2238%22 width=%221%22 height=%2240%22/%3E%3Crect x=%2242%22 width=%222%22 height=%2240%22/%3E%3Crect x=%2248%22 width=%221%22 height=%2240%22/%3E%3Crect x=%2252%22 width=%223%22 height=%2240%22/%3E%3Crect x=%2258%22 width=%221%22 height=%2240%22/%3E%3Crect x=%2262%22 width=%222%22 height=%2240%22/%3E%3C/g%3E%3C/svg%3E" alt="Order number 12345" />
Usage example 
<BarcodeImage src="/barcode-images/order-12345.svg" alt="Order number 12345" />
Show Svelte source 
// In your Svelte component:
import BarcodeImage from "lily-design-system-svelte-headless/components/BarcodeImage/BarcodeImage.svelte";

<BarcodeImage src="/barcode-images/order-12345.svg" alt="Order number 12345" />

Props

  • src: string (required) -- the barcode-image image URL or data-URL
  • alt: string (required) -- alternative text describing what the barcode-image encodes
  • loading: "lazy" | "eager" (optional) -- controls native browser loading behavior
  • ...restProps: Any additional HTML attributes

ARIA

  • alt="..." -- provides the accessible name for the barcode-image image; required for all non-decorative images

When to Use

  • Use to display 1D linear barcode-images (UPC, EAN, Code 128, Code 39) generated as an image.
  • Use for printed-and-scanned workflows: retail checkout, inventory, shipping, ticketing, library, patient identification.
  • Use when the encoded value is best represented as a flat raster or vector image.

Related components

  • qr-code — a QR code image generated from text or URL data
  • image — an image element with alt text
  • icon — a container for displaying an icon

Canonical contract

Generated from this component's canonical metadata — the machine-checked source the implementations are held to.

Metadata

  • Component: barcode-image
  • PascalCase: BarcodeImage
  • Description: a visual machine-readable symbolic code image, such as for a scanner
  • Status: experimental — recent catalog addition with the least accumulated depth; contract may still move
  • HTML tag: <img>
  • CSS class: .barcode-image
  • Interactive: no

ARIA

  • alt="..." -- provides the accessible name for the barcode-image image; required for all non-decorative images

Keyboard

  • None -- this is a passive image element

Props

  • src: string (required) -- the barcode-image image URL or data-URL
  • alt: string (required) -- alternative text describing what the barcode-image encodes
  • loading: "lazy" | "eager" (optional) -- controls native browser loading behavior
  • ...restProps: Any additional HTML attributes