Component

DecorationToll

Add one actual ink pass at a time. Underline, double-line, cross out and stamp the same notice until the final stage is reached; Remove ink returns it to its unmarked state.

Possible use

It could let a reviewer make a handoff note earn progressively heavier marks, or let a presenter decorate an agenda line until it looks ceremonially settled. Neither use makes the wording more approved.

Reasonable alternative

A reasonable local alternative is one status badge or one deliberate emphasis style. A button that invoices a notice for four extra decorations is a poor substitute for a clear state.

01 / Preview

Try it yourself.

Preview Interactive
Decoration tollUnmarked
12345
Ready for one more review

Pay one more ink fee to make the notice harder to justify.

Mechanism
1
Pay one typographic fee at a time.
2
Watch the same notice collect actual lines and a final stamp.
3
Remove the ink when decoration has stopped helping.

02 / Usage

Put it somewhere.

example.tsxTSX
import { DecorationToll } from "gra-ui";
import "gra-ui/styles.css";

export function TaxedNotice() {
  return <DecorationToll><span>Ready for one more review</span></DecorationToll>;
}

03 / API

Small surface area.

PropTypeDescription
childrenReactNodeThe notice that collects one real typographic decoration per toll payment.