Component
MarginQuota
It calculates a visible side margin from the label's own character count. Reserve the quota and the text moves out of the way while one slot appears for every character; reclaiming the space restores the full-width surface.
Possible use
It could be used to make a reviewer reserve visual room for a handoff note before it can stand beside a decision, or to let a presenter give an agenda label a literal amount of breathing room proportional to its copy.
Reasonable alternative
A reasonable local alternative is a normal layout with an intentional margin-inline value. Publishing a margin quota is difficult to defend because a label's character count is not a credible landlord.
01 / Preview
Try it yourself.
Reserve a margin equal to the label's character count, then reclaim it when the text has paid its rent.
- 1
- Start with a label occupying the whole available surface.
- 2
- Reserve the margin; one visible slot appears for every character.
- 3
- The label moves into the remaining space while the quota stays real.
- 4
- Reclaim the space when a label has finally paid enough rent.
02 / Usage
Put it somewhere.
import { MarginQuota } from "gra-ui";
import "gra-ui/styles.css";
export function RentedLabel() {
return <MarginQuota label="Review this once" />;
}03 / API
Small surface area.
labelstringThe text whose character count becomes a visible reserved margin.