Todos los componentes (204)

Menú de acciones

Acciones · ActionMenu

Qué es y cuándo usarlo

El menú de los tres puntos: las acciones de una fila, de una tarjeta o de una ficha, recogidas detrás de un botón y abiertas en un panel flotante pegado a él. MenuItem es cada acción; lo usan este menú y el de SplitButton, así que los dos se ven y se oyen igual.

Cuándo usarlo

Varias acciones que pesan lo mismo sobre una misma cosa: ver, duplicar, descargar, anular.
En cada fila de una tabla o una lista, donde no caben los botones sueltos.
Con sections para agrupar con título («Documentos», «Zona peligrosa»), o con trigger para abrirlo desde un botón con texto. placement y offset dicen dónde sale el panel.

Cuándo no

Si hay una acción principal y el resto son variantes de ella: SplitButton.
Si son una o dos acciones, van a la vista: Button o IconButton.
Para elegir un valor (un estado, un orden), no para hacer algo: Select.

Teclado: Intro, Espacio o flecha abajo sobre el botón abren el menú con el foco en la primera acción, y la flecha arriba en la última; las flechas lo recorren dando la vuelta y saltándose las deshabilitadas, Inicio y Fin van a los extremos, y escribir salta a la acción que empieza así; Intro y Espacio eligen; Escape cierra. Tanto al elegir como al cerrar, el foco vuelve al botón. Abierto con el ratón o desde fuera con open, el foco entra en la lista y no se marca ninguna acción. Las deshabilitadas (disabled en la acción, o disabledKeys en el menú) se ven, pero no se pueden elegir ni alcanzar.

Accesibilidad: label nombra el menú y, si no hay trigger propio, también el botón de tres puntos: que diga de qué son («Acciones del pedido 1042»), no «Menú». Las acciones con destructive van en rojo y con su verbo escrito: el color nunca va solo. Las que llevan href son enlaces de verdad (otra pestaña, copiar la dirección), y si la aplicación registra su enrutador con el proveedor de enrutado de la biblioteca, navegan con él.

Aspecto fino: sin variables propias: se ajusta con las clases amset-menu, amset-menu__panel, amset-menu__action y amset-menu__action--danger; el ancho del panel, con minWidth. El botón de serie es un IconButton y admite las --amset-button-*.

Cómo se ve

Abre un menú y elige.

<ActionMenu
  label="Acciones del pedido 1042"
  actions={[
    { key: 'ver', label: 'Ver el pedido' },
    { key: 'factura', label: 'Descargar la factura', detail: 'PDF' },
    { key: 'anular', label: 'Anular el pedido', destructive: true, separatedBefore: true },
  ]}
  onSelect={hacer}
/>

Props

Se importa con import { ActionMenu } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	Lo que se anuncia al abrir. "Acciones de la factura F-2026-0007", no "Menú".
`onSelect`obligatoria	`(key: string) => void`	—
`actions`	`readonly MenuAction[]`	Lista plana de acciones. Para agrupar con títulos, usa `sections`.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`disabledKeys`	`readonly string[]`	Claves deshabilitadas de golpe, sin tocar la lista de acciones.
`minWidth`	`string`	Ancho mínimo del panel, para que no baile entre estados.
`offset`	`number`	Separación en píxeles entre el botón y el menú.
`onOpenChange`	`(open: boolean) => void`	—
`open`	`boolean`	Abierto controlado desde fuera (por ejemplo, desde un atajo de teclado).
`placement`	`Placement`	Dónde sale el menú. Por defecto, debajo y alineado al final del botón.
`sections`	`readonly MenuSection[]`	Grupos con título: "Exportar", "Zona peligrosa".
`size`	`"sm" \| "md" \| "lg"`	Tamaño del botón de tres puntos de serie.
`trigger`	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	Disparador propio. Por defecto, un botón de tres puntos.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: