Component
NotchProgress
It advances one physical-looking notch at a time. The ring fills, the marks settle and the child sinks into its seal only at the fifth stage; starting again deliberately discards the certification.
Possible use
It could make a reviewer notch a handoff note once per glance, or let a presenter certify an agenda label before putting it on a slide. Both uses turn merely seeing content into an ornamental approval ritual.
Reasonable alternative
A reasonable local alternative is rendering the notice and using one explicit status when approval matters. A five-notch seal gives a progress meter authority over a task that has no measurable progress.
01 / Preview
Try it yourself.
The notice has not earned a notch.
Mechanism
- 1
- Start with a readable notice and an empty seal.
- 2
- Add five notches one at a time; the ring and paper depth respond.
- 3
- Begin again to discard the completely unnecessary certification.
02 / Usage
Put it somewhere.
example.tsxTSX
import { NotchProgress } from "gra-ui";
import "gra-ui/styles.css";
export function NotarizedNotice() {
return <NotchProgress><span>Ready for one more review</span></NotchProgress>;
}03 / API
Small surface area.
PropTypeDescription
childrenReactNodeThe notice that earns five visible notches.