# Row actions (goodtabs UI)

The kebab menu for a table row: edit, duplicate, extras and a destructive delete.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/row-actions.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/row-actions`

## Usage

```tsx
import { RowActions } from "@/components/ui/row-actions"

<RowActions onEdit={() => edit(row)} onDuplicate={() => duplicate(row)} onDelete={() => remove(row)} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| onEdit | `() => void` |  | Adds Edit as the first item. |
| onDuplicate | `() => void` |  | Adds Duplicate after Edit. |
| onDelete | `() => void` |  | Adds Delete in the destructive tone after a separator. |
| extra | `{ label: string; icon?: ReactNode; onSelect: () => void; disabled?: boolean }[]` | `[]` | More items, placed after Duplicate and before the separator. |
| label | `string` | `"Row actions"` | Accessible name of the trigger. |
| align | `"start" | "end"` | `"end"` | Which edge of the trigger the menu aligns to. |

## When to use

- The last cell of a table or list row, for actions that do not deserve their own buttons
- Cards and list items with the same two to five actions on every entry
- When one of the actions is destructive and should sit apart from the rest

## When not to use

- For a single action; show a plain button instead
- For bulk actions on selected rows; use selection-bar
- For actions that need confirmation right away; open a confirm dialog from onDelete

## Notes for agents

- It takes functions (onEdit, onDuplicate, onDelete, extra[].onSelect), so the component rendering it must be a client component
- Items appear only when their handler is passed; with no onDelete there is no separator
- Delete uses the dropdown menu's destructive item variant; keep it for actions that cannot be undone and confirm them from onDelete
- The trigger is a ghost icon-sm pill named by label; put it in a narrow right-aligned cell with py-1 so rows stay 40px

Docs: https://ui.goodtabs.co/components/row-actions