# RowActions

> One row's actions: at most one inline primary action, the rest in an overflow menu behind a 30px "more" button.

Source: https://ui.jcsoftdev.com/docs/components/row-actions

One row's actions: at most one inline primary action, the rest in an overflow menu behind a
30px "more" button. It never wraps, so the row keeps its height; destructive items sort last,
behind a separator. The menu is a WAI-ARIA menu: arrows, Home/End, typeahead, Escape.

## Import

```ts
import { RowActions } from "@jcsoftdev/ui/containers";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/containers/row-actions`.

## Usage

```tsx
<RowActions
  label="Acciones de Ana Quispe"
  primary={<Button size="sm">Ver ficha</Button>}
  items={[
      { id: "delete", label: "Eliminar", tone: "danger", icon: <Trash2 />, onSelect: fn() },
      { id: "edit", label: "Editar", icon: <Pencil />, onSelect: fn() },
      { id: "copy", label: "Duplicar", icon: <Copy />, onSelect: fn(), disabled: true },
    ]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` * | `string` |  | Accessible name of the overflow trigger. Name the row: "Actions for Ana Quispe". |
| `primary` | `ReactNode` |  | At most one inline action, typically a `Button size="sm"`: the one thing the row is mostly for. |
| `items` * | `readonly RowActionItem[]` |  | The rest, in the overflow menu. No trigger renders when it is empty. |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/containers-rowactions--default)
- [Primary Only](/storybook/?path=/story/containers-rowactions--primary-only)
- [In Clickable Row](/storybook/?path=/story/containers-rowactions--in-clickable-row)

## Source

`packages/ui/src/containers/row-actions/row-actions.tsx`