# Data matrix

A React component in [Beamline](https://beamline.io/)'s [Content & display](https://beamline.io/components/display) category. Live demo: https://beamline.io/components/data-matrix

A DataMatrix (ECC 200, ISO/IEC 16022) any scanner reads: crisp square modules in SVG at any size, the smallest symbol that holds the value (10×10 to 144×144, or 8×18 to 16×48 rectangles), GS1 element strings for pharmacy and lab labels, UTF-8 text marked with ECI. Its accessible name says what it holds; a value it can't hold draws no symbol and says why.

## Use it for

- A label that is printed and scanned: tubes, vials, boxes, bins, parts, assets.
- A GS1 code for medicines or medical devices (product, expiry, lot, serial).
- A code that must stay small: a 10 mm tube lid or a narrow side label (shape="rectangle").

## Not for

- A link a person opens with a phone camera app ([qr-code](https://beamline.io/components/qr-code): phone cameras read QR first).
- Decoration: a code nobody is meant to scan.

## Anatomy

- plate (light by default; never wider than its container)
- quiet zone (2 modules by default)
- modules: finder L on the left and bottom, clock tracks on the top and right, per data region
- refused: the reason in place of a symbol

## Variants

- **tone**: light, auto
- **shape**: square, rectangle

## States

- resting (the smallest symbol that holds the value)
- GS1 (FNC1 first; the accessible name reads the fields in words)
- rectangle
- refused: too long, not GS1, empty
- narrow (shrinks with its container, keeps its shape)

## Keyboard

- Not focusable; pair it with a copy button or the value in text when people need to read it.

## Motion

None: a code that moves can't be scanned.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `classNames` | `DataMatrixClassNames` | — | Classes for the named visual parts; no overrides by default. |
| `value` (required) | `string` | — | What the code holds: an ID ("ST-2300"), a URL, any text (UTF-8, marked with ECI 26 when not ASCII), or a GS1 element string with `gs1`. The smallest symbol that holds it is picked: 10×10 up to 144×144 (1,558 bytes of ASCII, 3,116 digits). |
| `gs1` | `boolean` | — | `value` is a GS1 element string with each AI in brackets, "(01)09506000134352(17)261231(10)LOT42": the code starts with FNC1 and separators are added after variable-length fields, as pharmacy and lab scanners expect. |
| `shape` | `DataMatrixShape` | — | "rectangle" picks from 8×18 to 16×48, for narrow labels and tube sides (up to 49 bytes); "square" (default) from 10×10 to 144×144. |
| `size` | `number \| "fill"` | — | Rendered width in px, quiet zone included; the height follows the symbol's shape. It never grows past its container. "fill" takes the container's whole width. Default 160. |
| `quietZone` | `number` | — | Light modules around the symbol, in modules. Scanners need at least 1; default 2. |
| `tone` | `"auto" \| "light"` | — | "light" (default): near-black squares on a near-white plate, what printers and every scanner need. "auto" draws in the theme's ink, for a code read only on this screen; in a dark theme that is light on dark (an inverted symbol), which phone readers take but some fixed scanners don't. |
| `label` | `string` | — | Accessible name. Defaults to what it holds: the value, or a GS1 code's fields in words ("product 09506000134352, expires Dec 31, 2026, lot LOT42"). |

## Used in

- [Label designer](https://beamline.io/components/label-designer.md)

## Import

```tsx
import { DataMatrix } from "@beamline/data-matrix";
```

## Get it

Data matrix is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in Content & display

- [Image compare](https://beamline.io/components/image-compare): Two images in one frame with a divider: drag anywhere, or arrow keys on the handle; horizontal or vertical, with captions.
- [Revision compare](https://beamline.io/components/revision-compare): Two revisions of a drawing on one camera: side by side, they pan and zoom together (a crosshair in one pane marks the point under the pointer in the…
- [Live cursors](https://beamline.io/components/live-cursors): Who else is working on this, and where: over any shared surface, each person's pointer in the colour their name always gets, with a name flag, gliding…
- [Document viewer](https://beamline.io/components/document-viewer): A PDF or a paged document read and marked up in place: page thumbnails beside it, zoom to the width, the page or a percentage, pages by keyboard, a…
- [Video player](https://beamline.io/components/video): A video player on the native <video> element: title bar with an external link and close, centre play with ±10 s, scrub, time, volume, speed, captions…
- [Lightbox](https://beamline.io/components/lightbox): A full-screen image viewer: a thumbnail grows into it and shrinks back, arrows and ←/→ step through the set, Esc or a downward drag closes it.
- [File diff](https://beamline.io/components/file-diff): A change to one file as a unified diff: line numbers, tinted lines, only the changed words marked, long unchanged stretches folded; give rows or just…
- [QR Code](https://beamline.io/components/qr-code): A scannable code set as gradient dots with rounded finder rings and an optional centre mark; a new value ripples out from the centre.
- [Slot text](https://beamline.io/components/slot-text): Text and numbers that roll into their new value on reels, digit by digit from the right; other characters fade. Read as plain text by assistive tech.
- [Text reveal](https://beamline.io/components/text-reveal): A headline whose words rise into place once, the first time it scrolls into view; never repeats.
- [Text morph](https://beamline.io/components/text-morph): A short label that becomes its next state letter by letter: shared letters glide into place, new ones arrive, old ones leave.
- [Code block](https://beamline.io/components/code-block): Code to read and copy: highlighted in the system's colours, numbered, marked lines, long files folded behind “Show all”.
- [Inbox list](https://beamline.io/components/inbox-list): Conversations waiting for a person, triaged in place: sender, subject and the first words, time, unread weight, star, labels and attachments, grouped by…
- [Comment thread](https://beamline.io/components/comment-thread): A discussion attached to something: replies, reactions, @mentions, editing and deleting your own, resolve that folds the thread.
- [Timeline](https://beamline.io/components/timeline): What happened, newest first and grouped by day: people with avatars, systems with toned icons, relative times with the exact time on hover, details in…
- [Description list](https://beamline.io/components/description-list): The details of one record as label and value pairs: beside each other or stacked, in as many columns as the room holds; a copy button arrives on the row…
- [Text shimmer](https://beamline.io/components/text-shimmer): Ongoing work said in words (“Thinking…”) with a calm band of light passing across them; stops when inactive.
- [Logo Carousel](https://beamline.io/components/logo-carousel): A wall of logos shown a few at a time: every few seconds the slots turn left to right, each logo leaving upward as the next rises in.
- [Avatar group](https://beamline.io/components/avatar-group): A team in a small space: overlapping faces that name themselves on hover or focus, and “+N” naming the rest.
- [Avatar](https://beamline.io/components/avatar): A person or account in a small space: a photo, or initials on the hue their name always gets; presence dot; circle for people, square for companies.
- [Item](https://beamline.io/components/item): The generic list row: media, title, description, meta and trailing actions; becomes a link or button when interactive.
- [Marker](https://beamline.io/components/marker): A labelled point in a stream: a status event with an icon between messages, or a label such as "Today" between two hairlines.
- [Credit](https://beamline.io/components/credit): "Designed with Beamline" for a site's footer: the Beamline mark and a quiet line, or a small badge. With your partner code, each new customer's first…
- [Badge](https://beamline.io/components/badge): A short status, category or count label: six tones, an icon or a status dot, two sizes.
- [Kbd](https://beamline.io/components/kbd): Keyboard keys as keycaps, for combinations and sequences (G then A); `mod` resolves to ⌘ or Ctrl per platform, symbols are spoken as words.

Part of [Beamline UI: polished, editable React components and complete screens for custom applications](https://beamline.io/). [Build your own style from any look; tokens, fonts, radii, motion; not only colours](https://beamline.io/docs/customize).