Row button
A row button is one pickable row in a list, or one tile in a grid. It is the button; you lay out what is inside.
A list you pick from
Press a row. The chosen one is tinted and has a selected edge.
Show code
<KbRowButton selected={picked === row} layout="inline" onClick={() => setPicked(row)}>{row}</KbRowButton>When to use
- Use it when the whole row is the target: a request in a queue, a category, a template, a framework.
- Put the columns inside it. Keep one line of text per column and let long text truncate with a tooltip.
- Use selected for the chosen row. For a radio or option row, pass role and aria-checked or aria-selected yourself.
- If the row only runs an action, use a button. If it goes to another page, use a link.
Import
import { KbRowButton } from "@/components/ui/KbRowButton";
<KbRowButton selected={id === picked} layout="inline" onClick={() => setPicked(id)}>Billing</KbRowButton>Props
| Prop | Type | Default | What it does |
|---|---|---|---|
selected | boolean | false | The chosen row. Also sets aria-current unless role is given. |
layout | "inline" | "stack" | stack | Children in one row, or in a column. |
dense | boolean | false | Less padding, for menus and palettes. |
role | string | None | radio, option, tab or menuitem when the row is one. |
Keyboard and screen readers
- A real button, so Space and Enter press it. type defaults to button.
- The selected row is marked with aria-current, or aria-checked and aria-selected for radio and option roles.
- Selected is shown by tint and an edge as well as colour; focus shows the shared ring.
- Hit area is the whole row, at least 44px tall under 860px wide.