Inspector Link

About this component

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.

Usage

The import and the props worth knowing about, in one place.

import { InspectorLink } from "@/components/beste/component/inspector-link";

// Uncontrolled
<InspectorLink label="Link" defaultValue={{ href: "https://beste.co", newTab: true }} />

// Controlled. The value is the pieces an anchor takes.
<InspectorLink
  label="Button link"
  value={link}
  onValueChange={setLink}
  onValueCommit={(value) => save(value)}
/>

// Destinations inside the site become a menu above the URL field
<InspectorLink
  label="Link"
  pages={[{ value: "/", label: "Home" }, { value: "/pricing", label: "Pricing" }]}
  value={link}
  onValueChange={setLink}
/>

<InspectorLink
  label="Source"
  icon={LinkIcon}          // optional leading icon
  tone="outline"           // "muted" (default) | "outline" | "ghost"
  size="sm"                // "sm" | "default" | "lg"
  allowNofollow            // offer the nofollow toggle
  placeholder="https://"
  emptyLabel="Not linked"  // what the row reads with no destination
  value={link}
  onValueChange={setLink}
/>

// What the value turns into
<a
  href={link.href}
  target={link.newTab ? "_blank" : undefined}
  rel={[link.newTab && "noreferrer", link.nofollow && "nofollow"].filter(Boolean).join(" ") || undefined}
>
  Read more
</a>

Props

Read from the component's own type, so this cannot drift from what it accepts.

Prop	Type	Default	Description
`label`*	`string`	—	Label rendered on the left, inside the row.
`icon`	`LucideIcon`	—	Optional leading icon shown before the label.
`value`	`LinkValue`	—	Controlled value. Pair it with `onValueChange`.
`defaultValue`	`LinkValue`	—	Initial value in uncontrolled mode.
`onValueChange`	`(value: LinkValue) => void`	—	Fires on every keystroke in the URL field and on every toggle.
`onValueCommit`	`(value: LinkValue) => void`	—	Fires once an edit is finished — the URL field left, a switch flipped, the link removed. Use it for work too expensive to run per keystroke.
`onOpenChange`	`(open: boolean) => void`	—	Fires when the editor opens or closes.
`pages`	`(string \| InspectorLinkPage)[]`	—	Destinations inside the site. Passing them adds a menu above the URL field, so the common case is a choice rather than a typed path.
`allowNofollow`	`boolean`	—	Offer the nofollow toggle.
`placeholder`	`string`	—	Ghost text in the URL field.
`emptyLabel`	`string`	`"None"`	What the row reads while there is no destination.
`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.
`className`	`string`	—
`aria-label`	`string`	—	Accessible name. Falls back to `label`.

More Inspector components

View all Inspector

Dark Mode

OffOn