> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/lwc-components/core-components/barcode.md).
# 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.
```html
```
**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.
```html
```
**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 for assistance.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.avonnicomponents.com/lwc-components/core-components/barcode.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.