Record card
A record card shows one record in a list or grid: title, quiet facts, a status, a short body and actions. With a link or open handler the whole card is one control.
Link, status and actions
Welcome tour
LiveGuides new visitors through setup in three steps.
Show code
<KbRecordCard title="Welcome tour" href="/admin/flows/abc" status={{ label: "Live", tone: "teal" }} meta={facts}>...</KbRecordCard>Pricing help
DraftAnswers the three questions people ask before upgrading.
Show code
<KbRecordCard title="Pricing help" actions={<KbButton variant="ghost" size="sm">Pause flow</KbButton>} .../>When to use
- Use it for records people scan and open: flows, knowledge sources, apps.
- The title is the record's name, never its id.
- primaryAction is the one gold button. In a list of cards leave it off and put the page's one primary in the header.
- Use a table instead when records are compared across many fields.
Welcome tour
Liveflow_8f3a2c
activeImport
import { KbRecordCard } from "@/components/ui/KbRecordCard";
<KbRecordCard title="Welcome tour" href="/admin/flows/abc" status={{ label: "Live", tone: "teal" }} meta={[{ key: "page", content: "Pricing page" }]}>
Guides new visitors through setup.
</KbRecordCard>Props
| Prop | Type | Default | What it does |
|---|---|---|---|
title | string | None | The record's name. |
href / onOpen | string / () => void | None | Makes the card one link or button. |
status | { label, tone?, dot? } | None | A lozenge beside the title. |
meta, metaLabel | KbMetaEntry[], string | None | One quiet line of facts. |
primaryAction, actions | ReactNode | None | One primary at most; the rest secondary or ghost. |
selected | boolean | None | Marks the open record; sets aria-current. |
Keyboard and screen readers
- The title is a heading; with href or onOpen it holds a real link or button whose hit area covers the card.
- Action buttons stay separate controls above the card link, each with a unique name.
- Focus draws the shared ring around the whole card.