Data matrix
A React component in Beamline's Content & display category.
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: 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
Import
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 · Connect your agent
More in Content & display
- 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: 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: 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: 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: 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: 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: 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: 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: 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: A headline whose words rise into place once, the first time it scrolls into view; never repeats.
- 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: Code to read and copy: highlighted in the system's colours, numbered, marked lines, long files folded behind “Show all”.
- 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: A discussion attached to something: replies, reactions, @mentions, editing and deleting your own, resolve that folds the thread.
- 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: 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: Ongoing work said in words (“Thinking…”) with a calm band of light passing across them; stops when inactive.
- 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: A team in a small space: overlapping faces that name themselves on hover or focus, and “+N” naming the rest.
- 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: The generic list row: media, title, description, meta and trailing actions; becomes a link or button when interactive.
- 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: "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: A short status, category or count label: six tones, an icon or a status dot, two sizes.
- Kbd: Keyboard keys as keycaps, for combinations and sequences (G then A); `mod` resolves to ⌘ or Ctrl per platform, symbols are spoken as words.