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.

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

Example

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" />