Component

SeparatorBallot

Choose a dot trail, slash file or column fall. Each ruling changes the actual separators and, for the column choice, the rendered list structure rather than merely changing a color or label.

Possible use

It could let a reviewer decide whether a handoff phrase belongs in dots, slashes or a vertical filing column, or let a presenter vote on how an agenda line should occupy a slide. The words gain no authority from their chosen punctuation.

Reasonable alternative

A reasonable local alternative is writing the desired separator directly or keeping the sentence in normal flow. A ballot makes a formatting decision look like governance.

01 / Preview

Try it yourself.

Preview Interactive
Separator ballotAwaiting a ruling

Prepare the remarkably ordinary handoff

A readable label waits for a separator policy.
Mechanism
1
Start with an ungoverned readable label.
2
Vote for dots, slashes or one word per line.
3
Return to normal spacing when the ruling feels ceremonial.

02 / Usage

Put it somewhere.

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

export function RuledLabel() {
  return <SeparatorBallot label="Prepare the remarkably ordinary handoff" />;
}

03 / API

Small surface area.

PropTypeDescription
labelstringThe words submitted to the three competing separator policies.