Component

ElementTriage

New

Choose Heading, Aside or Footnote. The child is actually rendered as an h3, aside or small footnote with different structure and emphasis, so the ruling changes the document rather than merely its color.

Possible use

It could let a reviewer decide whether a handoff note deserves a headline, a margin or a footnote, or let a presenter give one agenda line a temporary editorial rank. The markup changes, but the decision still has no evidence.

Reasonable alternative

A reasonable local alternative is authoring the correct semantic element at the call site and styling it locally. A triage desk makes HTML vocabulary look like a voting system.

01 / Preview

Try it yourself.

Needs an official place

Mechanism

1: Start with one notice in ordinary paragraph flow.
2: Choose Heading, Aside or Footnote.
3: The component renders a genuinely different HTML destination.
4: Return to intake when the markup has made its argument.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function TriagedNotice() {
  return <ElementTriage><span>Needs an official place</span></ElementTriage>;
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe content assigned to one of three materially different HTML destinations.