Sample badge
StableA small “Sample data” marker for anything that shows invented records or numbers.
Every demo on this site that shows made-up people, tasks or costs carries one, in the same words every time. SampleBadge uses the theme tokens and suits tools and docs; SampleTag uses the brand greys of the marketing sections.
Updated View source
On a card
import { SampleBadge } from '@rchursin/product/shell/layout'
const stats = [ ['Cost per task', '$1.84'], ['Finished', '78%'], ['Median session', '14m'],] as const
/** Invented numbers say so, right next to the title, in the same words every time. */export default function SampleBadgeCard() { return ( <div className="lux-card w-full max-w-sm rounded-2xl bg-raised p-5"> <div className="flex items-center justify-between gap-3"> <p className="text-[13px] font-semibold">This week</p> <SampleBadge /> </div> <dl className="mt-4 grid grid-cols-3 gap-3"> {stats.map(([term, value]) => ( <div key={term} className="flex min-w-0 flex-col gap-1"> <dt className="text-xs text-fg-3">{term}</dt> <dd className="text-xl font-semibold tracking-[-0.02em] tabular-nums">{value}</dd> </div> ))} </dl> </div> )}Usage
import { SampleBadge } from '@rchursin/product/shell/layout'import { SampleTag } from '@rchursin/home/ui'<SampleBadge />Examples
Badge and tag
The two cuts side by side. Same words, same size; only the greys differ.
import { SampleTag } from '@rchursin/home/ui'import { SampleBadge } from '@rchursin/product/shell/layout'
/** * Two cuts of the same marker. SampleBadge uses the theme tokens (product UI, docs); * SampleTag uses the brand greys of the marketing sections and takes the colour of its ring from the text. */export default function SampleBadgeTag() { return ( <dl className="grid grid-cols-[auto_1fr] items-center gap-x-6 gap-y-4 text-[13px]"> <dt> <SampleBadge /> </dt> <dd className="text-fg-2">SampleBadge, for tools and product screens</dd> <dt> <SampleTag /> </dt> <dd className="text-fg-2">SampleTag, for marketing sections</dd> </dl> )}API
SampleBadge props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | – | Extra classes (spacing, placement). |
SampleTag props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | – | Extra classes. |
Accessibility
- Both are plain text (“Sample data”) in mono capitals set by CSS, so screen readers read it where it sits in the reading order.
- Place it before or right after the title of what it marks, not at the end of a long table, so it is heard first.
- SampleBadge text is fg-3 on a ring, at 4.5:1 or more in both themes.
Guidelines
Do
- Mark every invented number, name or record.
- Keep the words “Sample data”; don’t vary them.
Don’t
- Don’t use it on real data to make it look provisional.
- Don’t hide it in a tooltip or a footnote.
In use
Used on this site
Related
- Verdict badgeKeep, fix, merge or cut: a mono badge where each verdict has its own shape, and the word is always there.
- Dashboard mockA still picture of the product: four headline numbers, a bar list of skill runs and a ledger with verdicts, on sample data.
- Run wallA month of agent runs as a wall of squares, with a sweeping day highlight you can pause.
- App windowThe RChursin_ app frame: a sidebar with the tools, a title row with a toolbar, and your tool in the body.
Source
The component’s own files, exactly as they run on this site.
/** * Layout pieces for the kit pages: an intro, numbered sections, specimens (one component on a * card with a caption), a keyboard table and a short list of rules. * They share the site's finishing layer: arrivals (lux-reveal), hairlines, grain, the halo. */import type { ReactNode } from "react"import { cx } from "../../components/cx"import { useLuxe } from "../../components/motion"import { delay } from "../../home/ui"import { KeyCombo } from "../ui/button"
export function KitPage({ children, className }: { children: ReactNode; className?: string }) { const root = useLuxe<HTMLDivElement>() return ( <div ref={root} className={cx("bg-surface text-fg antialiased", className)}> {children} </div> )}