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.
Adds the component and everything it depends on to your project.
npx shadcn add https://ui.beste.co/component/r-base/inspector-actionNew here? Read the installation guide.
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 />Turn the props on the right; the snippet under them is what you would write to get what you see.
import { InspectorAction } from "@/components/beste/component/inspector-action";
<InspectorAction
label="Open asset library"
className="w-72"
/>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`. |
Settings row for a destination: the row reads the URL with its scheme stripped and marks whether it leaves the tab, and opens an editor holding an optional page menu, the URL field and the target and nofollow switches.
The choice that has to be seen to be made: a template, a layout, a chart type. Each option is a picture, normally a rendered screenshot passed as a URL, or markup for the choices no photograph would show. The row is the trigger, the grid is width-matched to it, and the captions under the pictures can be dropped for a set whose pictures say everything.
Settings row for an image or a video: the asset itself as a thumbnail on the right, and pressing the row opens a width-matched editor with the URL, a preview and a remove. Given a picker of your own, it hands the choosing to your media library instead.
Settings row that names the chosen icon and shows it on the right; pressing the row opens a searchable palette below it, width-matched to the row, with clearing offered at the foot of it. The icon set is passed in, so the row never bundles an icon library of its own.