Component

CrestProgress

Raise one crest at a time and the actual notice travels upward through a tide gauge. Each stage changes its position and status; the final beacon is a disproportionate reward for pressing one button four times.

Possible use

It could let a reviewer elevate a handoff note from low water to beacon status, or let a presenter raise an agenda line before allowing it to close a slide. Neither use needs a tide gauge to express progress.

Reasonable alternative

A reasonable local alternative is one progress value or an explicit approval button. A sequence of rising paper levels gives an ordinary status more ceremony than information.

01 / Preview

Try it yourself.

1234

Ready for another review

Mechanism

1: Raise the notice one tide crest at a time.
2: Watch the actual cargo climb through four gauge levels.
3: Lower the tide when the beacon has become excessive.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function RisingNotice() {
  return <CrestProgress><span>Ready for another review</span></CrestProgress>;
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe notice that rises through the four actual gauge levels.