Trace
The steps behind an answer, folded under one line.
import { Trace } from "@flinbu/seed";Pluto's work on a contrast check
- Read tokens.json435 tokens
- text-accent-primary on bg-accent-primary 3.1:1 · text-tertiary on bg-secondary 4.1:1 · text-on-accent on bg-accent-solid 4.3:1
- Opened proposal #12
- Ask for review, Not started
import { Trace } from "@flinbu/seed";
return <Trace className="w-full max-w-xl" summary="Pluto checked your Dark theme · 6s" steps={[...STEPS.slice(0, 2), { title: "Opened proposal #12", href: "#" }, { title: "Ask for review", status: "pending" }]} />;Use it for
- Above Pluto's answer, folded once it's complete.
Use something else for
- Long logs: link to them.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
steps | { title, description?, icon?, status?, detail?, href? }[] | – | In order. |
summary | ReactNode | – | Folds the trace. |
open / defaultOpen / onOpenChange | boolean | true | Folded state. |
Accessibility
- Each step's status is in its name, not only its icon.
- Steps with detail are disclosure buttons.