craftbits*

Svg Label

A small annotation rendered inside an SVG at (x, y) user coordinates. The SVG-foundation primitive for "text floating over a viz" — point markers on charts, edge labels on graphs, spot annotations on vector visualizations.

hello world
Customize
Visual
accent
md
middle

Installation

npx shadcn@latest add https://craftbits.dev/r/svg-label.json

Usage

import { SvgLabel } from "@craft-bits/core";
 
<svg viewBox="0 0 200 100">
  <SvgLabel x={100} y={50} tone="accent">peak</SvgLabel>
</svg>

Understanding the component

  1. Drop inside <svg>. SvgLabel renders an SVG <g transform="translate(x, y)"> containing an optional pill <rect> and a <text> element. It must live inside an <svg>.
  2. Tone drives the palette. tone="default" uses --cb-fg text on --cb-bg-elevated; tone="accent" uses --cb-accent (or your hex override) with a faint tinted background; tone="muted" uses --cb-fg-muted with a near-transparent fill.
  3. Approximate width, not measured. The pill background's width is approximated from children.length * fontSize * 0.6. This avoids a render-and-measure trick that would break SSR. For long labels, pass withBackground={false} and size your own backdrop.
  4. Anchor controls alignment. anchor sets text-anchor on the <text> and shifts the pill horizontally so the rect always wraps the visible text correctly.

Props

PropTypeDefaultDescription
xnumberrequiredX position in SVG user coordinates.
ynumberrequiredY position in SVG user coordinates.
childrenstringrequiredLabel text (single string, not arbitrary nodes).
anchor'start' | 'middle' | 'end''middle'Text + background alignment.
tone'default' | 'accent' | 'muted''default'Color tone.
size'sm' | 'md''md'Font size tier (10 or 12 px).
padnumber4Background padding around the text (px).
withBackgroundbooleantrueRender the pill behind the text.
hexstring—Override the accent hex for tone="accent".

Accessibility

  • SvgLabel sets pointer-events: none and user-select: none by default since labels are decorative annotations.
  • The hosting <svg> should carry role="img" and aria-label describing the viz.
  • Color tones consume --cb-fg / --cb-fg-muted / --cb-accent so contrast follows the user's theme.

Credits

  • Extracted from: craftingattention (app/src/components/ui/SvgLabel.tsx).