Skip to content

ActionMenu

frontend-react/src/components/ui/ActionMenu.tsx

Dropdown (•••) menu for table row actions. Solves UI clutter from many inline row buttons.

Props

PropTypeDefaultDescription
itemsActionMenuItem[]Menu items (label, icon, onClick, danger?)
alignleft | rightrightDropdown alignment
triggerReactNode••• buttonCustom trigger element

ActionMenuItem shape

ts
{ label: string; icon?: ReactNode; onClick: () => void; danger?: boolean }

Usage

tsx
<ActionMenu items={[
  { label: 'Editar', onClick: () => edit(row) },
  { label: 'Excluir', onClick: () => del(row), danger: true },
]} />

Notes

  • Closes on click-outside and Escape key
  • danger: true renders label in red

Lançado sob a licença MIT.