Component

BracketEscalation

Escalate the supplied label from plain text through parentheses, square brackets, braces and double brackets. Each stage changes the rendered characters and remains reversible with Return to plain.

Possible use

It could let a reviewer make a handoff notice earn more containment before filing it, or let a presenter wrap an agenda caption in increasingly formal punctuation. Neither use gives the sentence more authority by surrounding it.

Reasonable alternative

A reasonable local alternative is writing the intended punctuation once or placing the label in a normal container. A click-powered bracket ladder turns containment into a permission system.

01 / Preview

Try it yourself.

Stage 1 / 5

Keep this notice in bounds

Mechanism

1: Start with ordinary text and no containment.
2: Escalate the label through five actual bracket pairs.
3: Each stage changes the rendered characters and its visible weight.
4: Return to plain when punctuation has become an authority system.

02 / Usage

Put it somewhere.

example.tsxTSX

import { BracketEscalation } from "gra-ui";
import "gra-ui/styles.css";

export function ContainedNotice() {
  return <BracketEscalation label="Keep this notice in bounds" />;
}

03 / API

Small surface area.

PropTypeDescription

labelstringThe text progressively enclosed by five increasingly emphatic bracket pairs.