Ctrlk
WebsiteYouTube ChannelSchedule a Call🪄 Build with AISubscribe for Updates
For the complete documentation index, see llms.txt. This page is also available as Markdown.

Barcode

avonni-barcode

Generates and displays a barcode or QR code from a given value, in a range of supported symbologies.

Overview

Barcode is a Lightning Web Component that renders a scannable barcode or QR code from a value you supply.

Use it in your own Lightning Web Components to display tracking numbers, product codes, or links. You control the barcode type, the encoded value, dimensions, colors, and how the human-readable value is displayed through the component's attributes.

Use Cases

  • Shipment tracking: Render a Code 128 barcode for a tracking number.

  • Retail products: Display an EAN-13 barcode for a product SKU.

  • Quick links: Generate a QR code that links to a URL or record.

  • Asset labels: Encode an asset tag for warehouse scanning.

  • Event passes: Produce a scannable code for check-in.

Use Case Examples

Example 1: Shipment tracking barcode

Scenario: Render a Code 128 barcode for a shipment tracking number with the value shown beneath it.

Result: A Code 128 barcode with the tracking number displayed centered below it.

Example 2: Branded QR code

Scenario: Generate a QR code linking to a site, using brand color and hiding the raw value.

Result: A 160px branded QR code with no visible text value.

Specifications

Attributes

Name
Description
Type
Default
Required

alternative-text

The assistive text for the barcode.

String

—

background

The background color as a hexadecimal color value. Defaults to #ffffff.

String

"#ffffff"

checksum

Set to true to show the checksum value.

Boolean

false

color

The barcode color as a hexadecimal color value. Defaults to #000000.

String

"#000000"

height

The maximum height of the barcode. The value accepts length values of any units. Unitless numbers are converted to pixels. By default the height depends on the width.

string

number

—

hide-value

If present, hide the value of the barcode.

Boolean

false

text-alignment

The position of the displayed value. Accepted values are top-left, top-center, top-right, top-justify, center-left, center-center, center-right, center-justify, bottom-left, bottom-center, bottom-right, bottom-justify.

String

"bottom-center"

text-color

The text color as a hexadecimal color value.

String

"#000000"

type

The type of barcode created. The supported types are listed below.

String

—

value

The value to encode in the barcode.

string

number

—

width

The maximum width of the barcode. The value accepts length values of any units. Unitless numbers are converted to pixels. Defaults to 100%.

string

number

"100%"

Key Considerations

  • Type and value match: Each barcode type has format rules (e.g. EAN-13 expects 12–13 digits); an invalid value won't render correctly.

  • Contrast: Keep strong contrast between color and background so scanners can read the code.

  • Sizing: width defaults to 100%; set explicit dimensions for fixed-size labels. Unitless numbers are treated as pixels.

  • Readable value: Use hide-value for QR codes where the raw string adds no value to users.

  • Best Practice: Choose a type that matches your data (e.g. ean13 for retail SKUs, qrcode for URLs), and keep enough contrast between color and background so scanners read it reliably.

Troubleshooting Common Issues

  • Barcode not rendering: Confirm value is set and valid for the chosen type.

  • Scanner can't read it: Increase size and ensure sufficient contrast between color and background.

  • Value text in wrong place: Adjust text-alignment, or set hide-value to remove it entirely.

  • If issues persist: Contact our support team at [email protected] for assistance.

Last updated

Was this helpful?