Component

RecessDepth

It turns one child into a filing well. Every press adds a real layer, shifts the content deeper and changes the final state from available to fully recessed; Unbury restores the original depth.

Possible use

It could let a reviewer bury a handoff note under successive approval sheets, or let a presenter recess an agenda label before deciding it has been sufficiently archived.

Reasonable alternative

A reasonable local alternative is the child itself with one visible status or a normal disclosure. Four physical filing layers make a simple label harder to retrieve without adding meaning.

01 / Preview

Try it yourself.

Ready to review

Mechanism

1: Start with a child above four empty filing layers.
2: Press File one layer. The content shifts deeper and one layer becomes real.
3: Continue until the content is fully recessed beneath the filing stack.
4: Unbury the child when the archive has become unnecessarily hard to reach.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function OverFiledNotice() {
  return <RecessDepth><span>Ready to review</span></RecessDepth>;
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe content pushed beneath four visible filing layers.