Botón que abre una lista de acciones (patrón menu button de la APG). Clic, Intro, Espacio o ↓ abren el menú en la primera acción y ↑ en la última; las flechas recorren la lista en círculo, Inicio y Fin van a los extremos y una letra salta a la siguiente acción que empieza por ella. Intro, Espacio o clic ejecutan la acción, cierran y devuelven el foco al botón; Escape cierra y Tab sigue adelante. Bloquear tarjeta no está disponible: se alcanza y se anuncia, pero no se ejecuta. Las acciones destructivas van en rojo y separadas. El menú usa la capa flotante común.

Angular

Vue

Última acción: ninguna

<flt-menu label="Acciones" [items]="items" (select)="run($event)" />

items = [
  { id: 'download', label: 'Descargar extracto' },
  { id: 'freeze', label: 'Bloquear tarjeta', disabled: true },
  { id: 'delete', label: 'Eliminar beneficiario', danger: true, separatorBefore: true },
];

<FltMenu label="Acciones" :items="items" @select="run" />

Sólo icono, alineado al final

Con iconOnly el botón muestra «⋯» y label pasa a ser su nombre accesible. align="end" alinea el menú con el borde final del botón, para cuando está al final de una fila.

Angular

Vue

Última acción: ninguna

<flt-menu label="Más acciones" [items]="items" variant="ghost" iconOnly align="end" (select)="run($event)" />

<FltMenu label="Más acciones" :items="items" variant="ghost" icon-only align="end" @select="run" />