Data
ListRow
A compact row for a recent-items list: an icon tile, a mono title with a caption, and a status mark with a chevron.
Examples
Recent backups
<List>
<ListRow href="/backups/1" icon={<GitHubIcon />} title="mishra-shardendu/observatory" meta="2 minutes ago" status="success" />
<ListRow href="/backups/2" icon={<GitHubIcon />} title="keploy/keploy" meta="12 minutes ago" status="running" />
<ListRow href="/backups/3" icon={<GitHubIcon />} title="anthropics/claude-code" meta="1 hour ago · failed" status="danger" />
</List>Guidelines
- The status mark is a success check, a danger x or a running spinner; the caption repeats the status word so the row never relies on colour alone.
- Pass href for a link (and component={Link} in Next.js); the chevron shows automatically.
- More than six rows want a View all link.
Props
| Prop | Type | What it does |
|---|---|---|
| icon, title, meta | ReactNode | The tile, the mono title and the caption. |
| status | "success" | "danger" | "running" | "none" | The mark on the right. |
| href, component, chevron, trailing | string, ElementType, boolean, ReactNode | Link target, the element to render, whether to show the chevron, extra content before the mark. |