Specimen tag
The Cahier's label for a product or a component: a manila tag with an eyelet, a typed catalogue number, a name, a stamp for its honest status and the fields of its record — and Stamp, the rubber stamp alone.
import { SpecimenTag, Stamp } from "@krizaka/ui/specimen-tag";Web only — React, from @krizaka/ui/specimen-tag. Beta: its API may still change in a minor version.
- Mobile · ✗ to build. A product app's status deserves the same tag; it comes with the native paper roles. issue #421
Why it is here. Used by krizaka.com.
When to use
- A product's or a component's status and meta in a showcase: what it is, whether it is out, where to see it.
- A row of products that run on one engine: tags hung on one wire (
mount="hang"). - A status said once, honestly, as a stamp (
Stamp): released, in development, not open yet.
When not to use
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { SpecimenTag, Stamp } from "@krizaka/ui/specimen-tag";Examples
A product
A catalogue number, the stamp, a sentence, two fields and the ways out.
Hung on one wire
mount="hang": the products that run on one engine, side by side.
The stamps
Stamp alone, in its four inks: ok, wip, construction, neutral.
Facts: ink and hue
tone="ink" (a duration, a price) and tone="hue" (an area, a vibe), size="sm" with a straight text, and a glyph.
Props
SpecimenTag
A specimen tag: the eyelet, a typed number, a name, a stamp, the record's fields, a sentence and a foot — the status and meta of a product or a component, labelled the way a field guide labels what it saw.
| Prop | Type | Default | Description |
|---|---|---|---|
code | ReactNode | — | The catalogue number, typed at the top: KZ-02, No. 042. |
fields | readonly SpecimenField[] | — | The record: a label and a value per line, typed. |
footer | ReactNode | — | The foot of the tag: links (the site, the source), a note. |
mark | ReactNode | — | Beside the title: a product's mark, a bird (decorative). |
mount | "pin" | "hang" | pin | hang — the tag hangs from a string (a row of tags on one wire); pin — pinned flat, no string. |
status | { label: ReactNode; tone?: StampTone; } | — | The status, stamped: { label: "In development", tone: "wip" }. |
title | ReactNode | — | What the tag labels: a product's name, a component's. Set in the display face. |
titleAs | "span" | "h2" | "h3" | "h4" | "p" | h3 | The element of the title (h3 in a grid of tags under a section's h2). |
Stamp
A rubber stamp: a short status pressed on a tag or a page, double-ruled, slightly askew.
| Prop | Type | Default | Description |
|---|---|---|---|
icon | ReactNode | — | A glyph before the text (a @krizaka/icons icon): decorative, hidden from assistive technology. |
size | "sm" | "md" | md | sm — a stamp among facts; md — a status on its own. |
straightText | boolean | size === "sm" | The border keeps its tilt and the text is straight: a price or a time is read, not admired. Defaults to true for size="sm". |
tone | StampTone | neutral | ok — released or usable today (green ink); wip — in development (pencil); construction — not open yet (the
margin's red); neutral — a fact; ink — the page's ink (a price, a duration); hue — the page's hue text
(--kz-hue-text: a vibe, an area). |
Accessibility
- The tag is an
article; its title is a heading (titleAs), the fields a description list. - The eyelet and the string are decorative; the mark beside the title is hidden from assistive technology.
- The stamp's ink reads ≥ 4.5:1 on the tag and on every surface, in both themes (the status text roles).
Best practices
- The stamp tells the truth:
okonly for what is out (dev preview, released),wipin development,constructionnot open yet. - Write the stamp and the fields in lower case: the tag is typed, never shouted.
- One sentence in the body, two to four fields; the foot holds the ways out (the site, the source).
inkandhueare for facts (a duration, a price, an area):size="sm"keeps the frame askew and the text straight, so figures are read, not admired.huefollows the page's--kz-hue-text.icontakes a@krizaka/iconsglyph; it is decorative (hidden), so the text must say the whole fact.- In a grid of tags under a section's
h2, keep the defaulth3titles.
Related components
Generated from the code of @krizaka/ui 3.63.1: its meta.ts, its examples and its types.Edit this documentation on GitHub