Grade stamp

A teacher's red-ink grade, « 18/20 », with a short remark — only from a real measurement passed in by the host, its source in a tooltip.

Web · ✓Mobile · ✗ à construireBureau · ✓BêtaBlocs

import { GradeStamp } from "@krizaka/ui/grade-stamp";

18.8/20Très bien, continue

Web uniquement — React, depuis @krizaka/ui/grade-stamp. Bêta : son API peut encore changer à une version mineure.

Mobile · ✗ à construire. It comes with the native paper roles of the Cahier. issue #421

Pourquoi il est là. The tool sites' homes (krizaka/krizaka-ui#548): a teacher's grade from real measures — coverage, Lighthouse — with its source.

Quand l’utiliser

To say how a project does on a measured quality: test coverage, a Lighthouse score, a bundle against its budget.
On a tool site's home or in a release note, where a teacher's grade is the Krizaka way to show the state.

Quand ne pas l’utiliser

A number with its trend, no remark.À la place : Stat
A status such as stable or in progress.À la place : Specimen tag

Installation

Installer

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Importer

import { GradeStamp } from "@krizaka/ui/grade-stamp";

Exemples

Test coverage

A coverage measure turned into a grade out of 20, with its source.

18.8/20Très bien, continue

Lighthouse

Four Lighthouse scores, each stamped with its own source.

19.6/20Excellent20/20Parfait18.4/20Bien joué

Props

A teacher's red-ink grade, 18/20 with a remark, only from real data: its source is in a tooltip.

Prop	Type	Défaut	Description
`source`requis	`string`	—	Where the number comes from (`Vitest coverage, 2026-10-23`): shown in the tooltip and read by assistive technology.
`value`requis	`number`	—	The measured grade, from `0` to `outOf`. Never invented: it comes from the host's data.
`locale`	`string`	`en`	The locale of the number (`17,5` in French).
`outOf`	`number`	`20`	The scale.
`remark`	`ReactNode`	—	The remark in the margin, written like a teacher (`Très bien, continue`).
`sourceLabel`	`string`	`Source`	The word before the source for assistive technology.
`tilt`	`number`	`-4`	The tilt in degrees.

Accessibilité

The score and the remark are real text; the source is also in visually hidden text, so a screen reader reads it without the tooltip.
The tilt is a transform: nothing moves under prefers-reduced-motion because nothing animates.
The ink is the margin's red, chosen for 4.5:1 on the paper in dark and light.

Clavier

Touches	Action
`Tab`	Focuses the stamp, which opens the tooltip with its source.

Bonnes pratiques

Never write a grade by hand: compute it from the measure (coverage / 100 * 20) and pass the source (Vitest coverage, 2026-10-23).
Write the remark like a teacher, short and warm: « Très bien, continue ».
A value outside 0 to outOf, or no source, renders nothing: a missing grade is better than a made-up one.
One stamp per measure, a few per page: a wall of red reads as noise.

Générée depuis le code de @krizaka/ui 3.63.1 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub