---
title: "Perspective - Barcode"
description: "The Barcode component enables you to display text as a barcode."
---

# Perspective - Barcode

> The Barcode component enables you to display text as a barcode.

![](2020-02-19_16-44-21.png)

**Component Palette Icon**:  

![](2020-02-19_16-48-55.png)

## Description

The Barcode component enables you to display text as a barcode. The component supports 105 different barcode types including Code 128, QR code, EAN-8, and ISBN.

 The Barcode component has two pre-configured [variants](ignition-modules/perspective/working-with-perspective-components/working-with-perspective-components.md): Code 128 and QR Code.

## Properties

Most Properties have binding options. For more information on Bindings, see [Types of Bindings in Perspective](ignition-modules/perspective/working-with-perspective-components/bindings-in-perspective/bindings-in-perspective.md).
This section only documents the Props Category of properties. The other Categories are described on the [Perspective Component Properties](ignition-modules/perspective/working-with-perspective-components/perspective-component-properties.md) page.

| Name          | Description        | Property Type  |
| ------------- | ------------- | -------------- |
| value         | Value to be encoded as a barcode.   | value: numeric |
| type          | What barcode specification to use, currently there are 105 formats supported including Code 128, QR code, EAN-8, and ISBN. Click here to see the [barcode specification options](perspective-barcode.md#barcode-specification-options).   | value: string  |
| displayValue  | If true, the barcode's value will be displayed as text.   | value: boolean |
| valuePosition | If displayValue is true, this property determines where the value should be displayed. Options are top or bottom; default is bottom.   | value: string  |
| valueStyle    | Sets a style for the display value for this component. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md). | object         |
| errorStyle    | Sets a style for this component. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md).                       | object         |
| style         | Sets an overall style for this component. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md). | object         |

### Barcode Specification Options
| A-B  | C    | D    | E-G  | 
| ------ | ------ | ----- | --- |
| auspost azteccodeazteccodecompactaztecrunebc412   | channelcode,codablockf,code11code128code16kcode2of5code32code39code39extcode49code93code93extcodeonecoop2of5           | daftdatabarexpandeddatabarexpandedcompositedatabarexpandedstackeddatabarexpandedstackedcompositedatabarlimiteddatabarlimitedcompositedatabaromnidatabaromnicompositedatabarstackeddatabarstackedcompositedatabarstackedomnidatabarstackedomnicompositedatabartruncateddatabaretruncstedcompositedatalogic2of5datamatrixdatamatrixrectangulardatamatrixrectangularextensiondotcode | ean13ean13compositeean14ean2ean5ean8ean8compositeflattermarkengs1-128GS1-128gs1-128compositegs1-ccgs1datamatrixgs1datamatrixrectangulargs1northamericancoupongs1qrcode | 

| H-J | K-P | Q-Z |
|---| --- | --|
| hanxinhibcazteccodehibccodeablockfhibccode128hibccode39hibcdatamatrixhibcdatamatrixrectangularhibcmicropdf417hibcpdf417hibcqrcodeiata2of5identcodeindustrial2of5interleaved2of5isbnismnissnitf14japanpost | kixleitcodemailmarkmatrix2of5maxicodemicropdf417microqrcodemsionecodepdf417pdf417compactpharmacodepharmacode2planetplesseyposicodepostnetpzn | qrcoderationalizedCodabarrawroyalmailsscc18symboltelepentelepennumericultracodeupcaupcacompositeupceupcecomposite     | 

## Component Events

The [Perspective Event Types Reference](appendix/reference-pages/perspective-event-types-reference.md) page describes all the possible component event types for Perspective components. Not all component events support each Perspective component. The [Component Events and Actions](ignition-modules/perspective/working-with-perspective-components/component-events-and-actions.md) page shows how to configure events and actions on a Perspective component. Component scripting is handled separately and can be accessed from the Component menubar or by right clicking on the component.

## Examples
### Example 1

![](2020-02-20_13-11-14.png)

|Property|Value|
|--|--|
|props.value|	014113910613|
|props.type|	upca|
|props.displayValue	|true|
|props.valuePosition	|bottom|
|props.valueStyle.fontFamily|	Verdana|
|props.valueStyle.fontSize|	18px|

### Example 2

![](2020-02-20_15-29-33.png)

|Property|Value|
|--|--|
|props.value|	http://inductiveautomation.com|
|props.type	|qrcode|
|props.displayValue|true|
|props.valuePosition|	top|
|props.valueStyle.color	|#2747C7|
|props.valueStyle.fontFamily|sans-serif|
|props.valueStyle.fontSize|	14px|
|props.valueStyle.fontWeight|	bold|
|props.style.paddingTop|	12px|
|props.style.borderColor|	D97700|