The row that does something instead of holding something: open a sub-panel, replace an asset, regenerate a key, delete the section. It carries a description, a hint, a busy spinner and a destructive treatment, and renders as a plain anchor when given an href.
The import and the props worth knowing about, in one place.
import { InspectorAction } from "@/components/beste/component/inspector-action";
// Opens something: an imperative verb, and the chevron that comes by default
<InspectorAction label="Open asset library" onClick={() => console.log("open the library")} />
// The description is a second line for a consequence the verb cannot carry, and it
// makes the row two lines tall, which is worth it for that and not for restating the label
<InspectorAction
label="Replace image"
description="The current one is used in three other places"
onClick={() => console.log("replace")}
/>
// Acts in place: no chevron, and a spinner while it runs
<InspectorAction
label="Regenerate key"
icon={RefreshCwIcon}
trailingIcon={null}
busy={regenerating}
hint="Last rotated in March"
onClick={() => console.log("rotate")}
/>
<InspectorAction
label="Delete section"
description="This cannot be undone"
destructive
trailingIcon={Trash2Icon}
onClick={() => console.log("delete")}
tone="ghost" // "muted" (default) | "outline" | "ghost"
size="sm" // "sm" | "default" | "lg"
/>
// A link. A plain anchor, since a registry component takes no view on the router.
<InspectorAction label="Open docs" href="https://ui.beste.co/docs" newTab />Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
label* | string | — | What the row does, in the imperative: "Open asset library", "Regenerate key". |
icon | LucideIcon | — | Optional leading icon shown before the label. |
description | string | — | A second line under the label, for a consequence a verb cannot carry — what gets lost, what it costs, what happens next. |
hint | React.ReactNode | — | Read-only text on the right, before the trailing glyph: a count, a state. |
onClick | () => void | — | What the press does. |
href | string | — | Where the press goes, for an action that is a link. Renders a plain anchor — a registry component takes no view on which router the project uses. |
newTab | boolean | — | Open the link in a new tab, with the `rel` that has to come with it. |
trailingIcon | LucideIcon | null | — | Glyph at the far right. A chevron by default, which is right for a row that opens something; pass `null` for one that acts in place. |
destructive | boolean | — | Paint it as destructive. The glyph and the label go red, the surface does not. |
busy | boolean | — | Work is in flight: a spinner replaces the trailing glyph and the row stops answering, so the same press cannot be made twice. |
disabled | boolean | — | Block interaction and dim the row. |
tone | "muted" | "outline" | "ghost" | "muted" | Surface treatment: filled (default), hairline outline, or bare until hover. |
size | "sm" | "default" | "lg" | "default" | Row height preset. A description makes the row taller than this on its own. |
className | string | — | |
aria-label | string | — | Accessible name. Falls back to `label`. |