Component gallery

Tooltip

Hover and focus tooltips: placements, colors, the rich preset for structured content, and interactive bodies.

Job row actions

Icon-only kit Buttons each carry their own tooltip; delete removes the row for real, re-run queues it
JobCatalogStatusActions
job_9421Part Type
AC Delco Q3Complete
job_9420Scrape
Lighting SKUsNeeds attention
job_9419Normalize
AC Delco Q3Running
job_9418Content
Lighting SKUsFailed

Long source file path

A truncated cell passes its full value as content; a short one passes nothing at all
JobSource file
job_9421
ac-delco-q3/2026-08-11/brake-pads.csv
job_9418
ac-delco-q3/2026-08-11/vendor-export-full-catalog-with-fitment-and-images.csv
job_9407
lighting-skus/2026-08-08/tail-light-assemblies-normalized-attributes.csv

Backspacing field, explained

A help icon beside the label explains the attribute; markdown bolds the load-bearing word
Backspacing

Rows sent to review

An external Tooltip explains one anomalous number with the rich title, body, footer preset
Sent to review
86
of 640 rows

Run job, blocked

bricked plus tooltip states exactly why, in priority order, until the block clears

Job status legend

Each pill's tooltip color matches its own status tone
Complete
Running
In review
Needs attention
Failed

Job detail panel, edge controls

Every tip opens toward the panel's center. Tab through them: tooltips open on focus too
Job detail panel

Notification preferences, on hover

The tip holds a real toggle and a link; the pointer can travel into it without it closing

Taxonomy audit history

A long log scrolls inside the tip instead of stretching the page

Styling slots

Every className the component exposes, and what it reaches
className
the trigger wrapper
_className
the floating positioning root
tipClassName
the tip box itself
titleClassName
the bold heading line
footerClassName
the muted footer line
@versable-git/ui · all states, both themes