Component

ShapeVerdict

Choose one of three shape verdicts and the notice receives a genuinely different geometry: round, notched or pointed. The words remain unchanged while their silhouette pretends to carry a ruling.

Possible use

It could let a reviewer choose whether a handoff note is a coin, a filing ticket or a directional flag, or let a presenter give an agenda line a silhouette before discussion. The shape adds posture without adding meaning.

Reasonable alternative

A reasonable local alternative is one intentional style class or a status label. A select should not decide whether readable content is round, notched or pointed.

01 / Preview

Try it yourself.

Needs a decision

Issue a shape

The words stay the same; the geometry now claims a different authority.

Mechanism

1: Choose Coin, Ticket or Flag from the native select.
2: See the same notice receive a real silhouette and seal.
3: Pick another verdict when the geometry feels unjustified.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function ShapedNotice() {
  return <ShapeVerdict><span>Needs a decision</span></ShapeVerdict>;
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe notice sentenced to one of three actual silhouettes.