Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProThe kebab menu at the end of a row with a button named after the row, disabled actions that explain why, and destructive actions set apart after a separator.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use this for the last cell of a table row or the end of a list item when there are three or more secondary actions.
Do not use it for one or two actions, which should be visible buttons, or for the primary action of the row.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
rowName | string | - | Used in the button's accessible name. |
actions | { id, label, destructive?, disabledReason? }[] | - | Actions; a disabledReason disables and explains. |
onAction | (actionId: string) => void | - | Called when an action is chosen. |
aria-disabled and shows the reason as text inside the item.| Key | Action |
|---|---|
| Enter, Space or ArrowDown on the button | opens the menu |
| Arrow keys and typeahead | move between actions |
| Escape | closes and returns focus to the button |
The pattern ships a Testing Library test (menu-row-actions.test.tsx) that covers distinct names per row, the disabled reason, running an action and the destructive group.