ActionsMenuButton

ActionsMenuButton renders a vertical ellipsis icon (moreVertical) that, when clicked, opens a floating popover containing a list of buttons. Each item in the menu can have its own label, icon, style, and click handler. Use it for row-level action menus in tables, lists, or cards.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | menuItems | MenuItem[] | Yes | — | Array of menu items to display in the popover. See MenuItem definition below. | | onItemSelect | (actionName: string) => void | No | — | Global handler called with the item's name when an item without its own onClick is selected. | | buttonStyles | React.CSSProperties | No | — | Inline styles applied to the trigger icon button. | | popoverStyles | React.CSSProperties | No | — | Inline styles applied to the popover container. |

MenuItem

Each object in the menuItems array has the following shape:

| Field | Type | Required | Description | |-------|------|----------|-------------| | name | string | Yes | Unique key identifying the menu item. Passed to click handlers. | | label | string | Yes | Human-readable text displayed in the menu. | | icon | string | No | Icon identifier shown before the label. | | style | React.CSSProperties | No | Inline styles applied to this specific menu item button. | | onClick | (actionName: string) => void | No | Per-item click handler. Takes priority over onItemSelect. |

Usage

Basic

import ActionsMenuButton from '@/components/buttons/ActionsMenuButton';

export default function Example() {
  return (
    <ActionsMenuButton
      menuItems={[
        { name: 'edit', label: 'Edit', icon: 'edit' },
        { name: 'delete', label: 'Delete', icon: 'trash' },
      ]}
      onItemSelect={(name) => console.log('Selected:', name)}
    />
  );
}

With per-item handlers

import ActionsMenuButton from '@/components/buttons/ActionsMenuButton';

export default function Example({ id }: { id: string }) {
  return (
    <ActionsMenuButton
      menuItems={[
        {
          name: 'edit',
          label: 'Edit',
          icon: 'edit',
          onClick: () => console.log('Edit', id),
        },
        {
          name: 'delete',
          label: 'Delete',
          icon: 'trash',
          style: { color: 'red' },
          onClick: () => console.log('Delete', id),
        },
      ]}
    />
  );
}