Edge Label
Label the link between two nodes in a React graph or flow with an uppercase pill. Two emphasis levels for streams or handoffs. Install via the shadcn CLI.
What it is & when to use
Edge Label is a small pill-shaped tag for annotating the connection between two nodes — the kind of label you place on an edge in a graph, flow, or pipeline to name a stream, handoff, or policy. It renders as an inline, uppercase, letter-spaced badge and takes an emphasis prop with two levels: subtle for muted resting labels and active for a highlighted sky-toned state. It forwards every native span prop for positioning.
Browse all OverlayPreview
Switch between light and dark to inspect the embedded Storybook preview.
Installation
pnpm dlx shadcn@latest add https://ui.vllnt.com/r/edge-label.jsonStorybook
Explore all variants, controls, and accessibility checks in the interactive Storybook playground.
View in StorybookCode
import { cn } from "../../lib/utils";
export type EdgeLabelProps = React.ComponentPropsWithoutRef<"span"> & {
emphasis?: "active" | "subtle";
};
const emphasisClasses: Record<
NonNullable<EdgeLabelProps["emphasis"]>,
string
> = {
active: "border-sky-500/30 bg-sky-500/10 text-sky-700 dark:text-sky-300",
subtle: "border-border/60 bg-background/90 text-muted-foreground",
};
const EdgeLabel = ({
className,
emphasis = "subtle",
ref,
...props
}: EdgeLabelProps & { ref?: React.Ref<HTMLSpanElement> }) => (
<span
className={cn(
"inline-flex items-center rounded-full border px-2.5 py-1 text-[11px] font-medium uppercase tracking-[0.18em] shadow-sm",
emphasisClasses[emphasis],
className,
)}
data-emphasis={emphasis}
ref={ref}
{...props}
/>
);
EdgeLabel.displayName = "EdgeLabel";
export { EdgeLabel };
Frequently asked questions
- What is Edge Label?
- Edge Label is a React component that renders a small uppercase pill used to label the relationship on a graph edge or flow connector, such as a stream, handoff, or policy.
- How do I add Edge Label to my app?
- Run `pnpm dlx shadcn@latest add https://ui.vllnt.com/r/edge-label.json`, then render `<EdgeLabel emphasis="active">stream</EdgeLabel>` and position it over your edge.
- What emphasis styles does Edge Label support?
- Two, via the `emphasis` prop: `subtle` (the default) renders a muted, bordered label, and `active` renders a highlighted sky-colored label. The chosen value is also exposed as a `data-emphasis` attribute for styling.