Icon button
Permite ejecutar una acción representada solo por un ícono, sin texto visible, cuando el espacio es limitado o la acción es inequívoca.
- Ejecutar una acción sin texto: resolver con un ícono que comunica la acción por sí solo. Ej.: eliminar, editar o cerrar.
- Resolver en un espacio reducido: ubicar la acción donde un botón con texto no entra, como filas de una tabla, encabezados, barras de herramientas o celdas.
- Abrir un menú de acciones: desplegar acciones secundarias desde un único disparador. Ej.: el ícono de más opciones que despliega un menú.
- Repetir una acción por fila: ofrecer la misma acción en cada elemento de una lista, donde el contexto de la fila ya deja clara su intención. Ej.: eliminar cada ítem de un listado.
- Comunicar con texto imprescindible: cuando la acción no se representa de forma inequívoca con un ícono y el texto es necesario para entenderla. En su lugar, usar Button con ícono y label.
- Destacar la acción principal: la acción principal de la pantalla o de un formulario, que necesita jerarquía y un label explícito. En su lugar, usar Button con apariencia primary. Ej.: "Guardar cambios".
- Navegar a otra página: llevar a otra vista o ver más detalle en lugar de ejecutar una acción. En su lugar, usar Link. Ej.: "Ver detalle".
- Agrupar varias acciones: reunir varias acciones bajo un mismo control con etiquetas visibles. En su lugar, usar Menu button.
- Surface: contenedor que delimita el área interactiva; define el fondo y el borde del botón en cada estado.
- Icon: símbolo que comunica la acción. Se pasa por la prop source, con un ícono de @nimbus-ds/icons, y es el único contenido visible del botón.
Default: opción por defecto para la mayoría de las acciones, cuando el botón debe leerse con claridad como interactivo y no se integra en una estructura densa. Ej.: editar, eliminar o cerrar.
Transparent: cuando el botón se integra en una estructura densa (barras de herramientas, filas de tabla, encabezados) y no debe competir con el contenido; la superficie aparece solo al interactuar. Ej.: las acciones por fila de un listado.
AI generative (ai-generative): reservar para acciones de inteligencia artificial o de Lumi, para distinguirlas de las acciones comunes. Ej.: enviar un mensaje en un chat asistido por IA.
Large (2.75rem, 44 px): valor recomendado por defecto; cumple el área táctil mínima de 44×44 px.
Medium (2rem, 32 px): usar en contextos densos donde el botón acompaña otro contenido, cuidando que siga siendo cómodo de tocar. Ej.: una acción inline dentro de una fila.
El Icon button aparece junto al contenido sobre el que actúa, en contextos donde el espacio es acotado: filas de una tabla o de una lista, encabezados de sección y barras de herramientas, el cierre de un modal o de un mensaje, y como disparador de un menú de opciones.
Con más espacio disponible, las acciones por elemento pueden mostrarse directamente en la fila, cada una en su propio botón, y combinarse con un Tooltip que revela la acción al pasar el cursor.
Con el espacio reducido, las acciones por elemento se colapsan en un único disparador (⋮) que abre un menú de opciones, en lugar de ocupar la fila con varios botones.
Compartir
Duplicar
Eliminar
Tus notas
Elegir un ícono que represente la acción de forma inequívoca, como editar o eliminar.
Configuración
Evitar íconos que no dejan clara la acción que ejecuta el botón en su contexto.
Usar la apariencia AI generative en una sola acción por contexto, la principal de IA (como enviar).
Evitar más de un botón con apariencia AI generative en el mismo contexto: usar solo uno.
Usar solo los tamaños Large (2.75rem) o Medium (2rem).
Evitar tamaños fuera de Medium o Large: un botón más chico no cumple el área táctil mínima.
- Etiqueta accesible: al no tener texto visible, el botón necesita un aria-label que describa la acción que ejecuta, no el ícono. Ej.: aria-label="Eliminar producto".
- Significado no dependiente del ícono: acompañar el botón con un Tooltip o reforzar con color cuando la acción es crítica; el ícono solo no debe ser la única pista de su función.
- Navegación por teclado: al renderizarse como button, es enfocable y se activa con Enter y Espacio; mantener un orden de foco coherente con el resto de la interfaz.
- Foco visible: conservar el anillo de foco que el componente muestra al navegar con teclado; no removerlo con estilos propios.
- Estado deshabilitado: usar el atributo disabled para bloquear la acción; el componente atenúa el botón y desactiva la interacción.
- Área táctil: mantener el tamaño por defecto (2.75rem, 44 px), que cumple el área táctil mínima recomendada de 44×44 px; al reducir size, verificar que siga siendo cómodo de tocar.
Instalá el componente vía terminal.
npm install @nimbus-ds/componentsimport React from "react";
import { IconButton } from "@nimbus-ds/components";
import { TiendanubeIcon } from "@nimbus-ds/icons";
const Example: React.FC = () => (
<IconButton source={<TiendanubeIcon size="small" />} />
);
export default Example;Las propiedades adicionales se pasan al elemento <IconButton>. Consultá la documentación del elemento button para ver la lista de atributos aceptados.
- Button — Para acciones que necesitan un label de texto o jerarquía visual, con o sin ícono.
- Link — Para navegar entre páginas o ver más detalle, en lugar de ejecutar una acción.
- Menu button — Para agrupar varias acciones bajo un mismo control con etiquetas visibles.
IconButton
| Name | Type | Default | Description |
|---|---|---|---|
as | 'button' | 'button' | Type of html tag to create for the Icon Button component. |
source* | React.ReactNode | The SVG contents to display in the Icon button. | |
color | 'ai-generative' | 'neutral-textHigh' | Set the color for the inner Icon fill. |
appearance | 'ai-generative' | AI gradient background appearance for the button container. When provided, container color/border sprinkles are ignored in favor of gradient styles. | |
size | string | '2.75rem' | The size of the component. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "active": "value", "hover": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' |
borderColor | 'ai-generativeSurface' | '{ xs: "neutral-interactive", active: "neutral-interactivePressed", hover: "neutral-interactiveHover", focus: "primary-interactive" }' | The borderColor property sets the color of the icon button's four borders. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "active": "value", "hover": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' |
backgroundColor | 'ai-generativeSurface' | '{ xs: "neutral-surface", active: "neutral-interactive", hover: "neutral-surfaceHighlight" }' | The backgroundColor property sets the background color of the icon button. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "active": "value", "hover": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' |
IconButton.Skeleton
| Name | Type | Default | Description |
|---|---|---|---|
width | string | Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own. | |
className | string | ||
height | string | Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance a card. | |
data-testid | string | This is an attribute used to identify a DOM node for testing purposes. |
Ayudanos a mejorar la documentación
¿Encontraste un problema o tenés una sugerencia? Contanos.