Component
SpaceStaple
It turns the gaps in a label into landing places for a tiny staple. Release the staple at one gap and that actual space disappears, leaving the words awkwardly fused until the label is unstapled.
Possible use
It could be used to make a reviewer choose which phrase in a handoff note should be fused for a compact subject line, or to let a presenter ceremonially compress one agenda label before showing it.
Reasonable alternative
A reasonable local alternative is the original label with one string replacement. Publishing a draggable staple is difficult to defend because typography does not need a physical object to decide where words stop being separate.
01 / Preview
Try it yourself.
Drag the staple across the rail. One gap will be declared unnecessary.
Drag the staple to one gap. That space will be removed from the actual label.
- 1
- Start with three ordinary words and their visible gaps.
- 2
- Drag the staple across the rail, or focus it and use the arrow keys.
- 3
- Release at a gap; that real space disappears and the words fuse.
- 4
- Unstaple the label when one missing space has been enough ceremony.
02 / Usage
Put it somewhere.
import { SpaceStaple } from "gra-ui";
import "gra-ui/styles.css";
export function StapledBrief() {
return <SpaceStaple label="Friday review notes" />;
}03 / API
Small surface area.
labelstringThe text whose spaces can receive the staple.