Menu Button

1.6.0

El patrón Menu Button es un elemento interactivo cuyo objetivo es ofrecer acceso rápido a una sección o acción especifica dentro de una listado de accesos (Menu).

import React, { useState } from "react";
import { MenuButton } from "@nimbus-ds/patterns";
import { HomeIcon } from "@nimbus-ds/icons";

const Example: React.FC = () => {
  const [active, setActive] = useState(false);
  const handleActive = () => setActive(!active);

  return (
    <MenuButton
      label="Menu button"
      startIcon={HomeIcon}
      onClick={handleActive}
      active={active}
    />
  );
};

export default Example;

Implementación

Instalá el componente via terminal.

npm install @nimbus-ds/menubutton

Menu Button

Cuándo usar

Cuando se necesitan mostrar múltiples acciones relacionadas con un objeto (ej. editar, duplicar, eliminar).
En tooltips con acciones opcionales relacionadas al flujo de trabajo del usuario.
Cuando se necesita mostrar un listado de accesos en donde pueden existir categorias principales de navegación y subcategorias

Cuándo no usar

Cuando solo hay una acción disponible: en ese caso se debe mostrar como botón directo.
Cuando las acciones son primarias o de alta frecuencia de uso.

Criterios de usabilidad y productividad

Agrupa acciones relacionadas para minimizar el ruido visual y mantener la interfaz enfocada.
Reduce la carga cognitiva al organizar funciones de forma predecible y contextual.
Compatible con acciones en lote si se utiliza en conjunto con selecciones múltiples.

Accesibilidad

Soporte completo de teclado: Tab para navegar, Enter o Space para abrir, flechas para desplazarse.
Roles y atributos ARIA correctos (aria-haspopup, aria-expanded, aria-controls, menuitem).
Asegurar foco visible al abrir el menú.
Áreas táctiles adecuadas en dispositivos mobiles (mínimo 44x44px).

Anatomía

El Menu Button se compone de:

Botón con ícono (⋮ o similar).
Menú desplegable con una lista de acciones secundarias.
Opciones con texto y, opcionalmente, iconos.
Separadores para agrupar acciones cuando sea necesario.

Dependencias

IconButton
tooltip
Icon
Text

Variantes

Default: Ícono + texto.
With tag: Ítem con tag. Se utiliza para comunicar atributos de la sección, como "nuevo" o "novedad".
With badge: Ítem con badge. Se utiliza para mostrar cantidades o notificaciones numéricas, por ejemplo, la cantidad de ventas.
With ícono: Ítem con ícono. Se utiliza para indicar un comportamiento específico, como redireccionamientos o apertura en una nueva pestaña.
Accordion button: Ítem accionable que despliega opciones secundarias o complementarias.

Do and Don'ts

✅ Do

Usar íconos descriptivos junto al texto para mejorar la comprensión.
Usar para agrupar acciones.
Ordenar las opciones por relevancia y frecuencia.
Asegurar una experiencia fluida con teclado y screen readers.
Usar íconos cuando aporten claridad.

❌ Don't

Colocar la acción principal de la interfaz dentro del menú.
Usar el Menu Button con una única opción.
No proporcionar feedback de foco al abrir.
Repetir acciones ya visibles fuera del menú.

Props

Additional props are passed to the <MenuButton> element. See button docs for a list of props accepted by the <MenuButton> element.

MenuButton

Name	Type	Description
as	'button' 'a' React.ElementType	The underlying element to render — either a HTML element name or a React component.
label*	string	Text label for the button.
onClick	() => void;	Function executed when clicking the button.
startIcon	React.FC<IconProps>	Sets an icon element on the left of the button.
active	boolean	Sets the state of the button as active/inactive.
children	React.ReactNode	Inner components displayed on the right of the button component.

MenuButton.Accordion

Name	Type	Description
children*	React.ReactNode	Content of the menu.
menuButton*	React.ReactNode	It will be the accordion anchor and can contain all the props available in the MenuButton component's API.
contentid*	string	Required ID used to maintain correct component accessibility, it will be passed on to MenuButtonAccordion's children.
open	boolean	Changes the component usage so that control of open and close is controlled from outside the component.
active	boolean	Sets the state of the button as active/inactive.