Icon
Permite mostrar un ícono de la biblioteca de Nimbus dentro o junto a otro contenido, para reforzar visualmente una acción, un estado o un mensaje.
- Reforzar un texto o un estado: mostrar un ícono junto a un texto o dentro de otro componente para reforzar visualmente su significado, sin remplazarlo. Ej.: un ícono de camión junto al estado "Enviado" de un pedido.
- Aplicar el estilo de IA/Lumi: usar color="ai-generative" para destacar un ícono vinculado a una acción o un contenido generado o asistido por inteligencia artificial. Ej.: el ícono que acompaña una sugerencia de Lumi.
- Ilustrar una sección o un ítem de navegación: distinguir visualmente las secciones de un menú, un sidebar o una lista de opciones. Ej.: el ícono de cada sección del panel de administración.
- Ejecutar una acción al hacer clic: Icon no maneja foco de teclado ni eventos de interacción propios. En su lugar, usar Icon button, que agrega el comportamiento de botón y su aria-label.
- Comunicar un estado por sí solo, sin texto: un ícono aislado no alcanza para transmitir un estado con claridad. En su lugar, usar Badge o Tag, que combinan ícono y texto en una sola pieza.
- Mostrar contenido textual: Icon solo acepta una forma vectorial como source. En su lugar, usar Text para cualquier contenido de texto.
Icon
- Icon: forma vectorial que se pasa por la prop source, tomada de la biblioteca @nimbus-ds/icons; es el único contenido visible del componente.
neutral-textLow (valor por defecto): usar en la mayoría de los casos, cuando el ícono acompaña un texto neutro y no necesita distinguirse por color. Ej.: el ícono de un ítem de menú.
currentColor: heredar el color de texto del elemento que envuelve al ícono, para que combine automáticamente con el texto que lo acompaña. Ej.: un ícono dentro de un Button que ya define su propio color.
primary-interactive: usar en un ícono vinculado a un elemento interactivo, como un enlace o una acción principal. Ej.: el ícono de un enlace destacado.
success-textLow: comunicar un resultado positivo o una confirmación, junto a un texto del mismo color. Ej.: el ícono de un pedido entregado.
warning-textLow: advertir sobre una condición que requiere atención, sin llegar a ser un error, junto a un texto del mismo color. Ej.: el ícono de stock bajo.
danger-textLow: comunicar un error o un estado negativo, junto a un texto del mismo color. Ej.: el ícono de un pago rechazado.
ai-generative: aplicar el degradé de IA/Lumi de Nimbus a un ícono vinculado a una acción o a contenido generado por inteligencia artificial. Ej.: el ícono que representa una sugerencia de Lumi.
Icon aparece embebido dentro o junto a otro contenido: como parte de un Badge o un Tag, junto a un Text que describe un estado, dentro de un ítem de menú o de un Toast, o como el contenido visible de un Icon button.
Entregado
Producto sin stock
Acompañar el ícono con texto cuando comunica un estado, para que el significado no dependa solo del color.
Evitar dejar el ícono como única fuente de información de un estado, sin texto que lo acompañe.
Usar Icon button para un ícono que ejecuta una acción: agrega foco de teclado y aria-label.
Evitar simular un botón con Icon y cursor="pointer": no es enfocable ni accesible por teclado.
- Refuerzo visual, no único canal de información: cuando el ícono comunica un estado o una categoría, acompañarlo con texto o con un componente que ya combine ambos (Badge, Tag), para que el significado no dependa solo de la forma o el color del ícono.
- Etiqueta accesible cuando el ícono va solo: si Icon se usa sin texto visible que explique su función, pasar un aria-label como atributo adicional; se aplica al elemento que envuelve al ícono. Si además ejecuta una acción, usar Icon button, que ya declara su propio aria-label.
- No interactivo por sí mismo: Icon no agrega foco de teclado ni maneja eventos de teclado. Si necesita responder a un clic, usar Icon button en lugar de agregar un cursor o un onClick sobre Icon.
- Contraste del color: al elegir un token de color, verificar que mantenga contraste suficiente contra el fondo en el que se usa, sobre todo con tonos claros dentro de una superficie clara.
Instalá el componente vía terminal.
npm install @nimbus-ds/componentsimport React from "react";
import { Icon } from "@nimbus-ds/components";
import { TruckIcon } from "@nimbus-ds/icons";
const Example: React.FC = () => (
<Icon role="img" aria-label="Shipping" source={<TruckIcon size="medium" />} />
);
export default Example;Las propiedades adicionales se pasan al elemento <Icon>. Consultá la documentación del elemento div para ver la lista de atributos aceptados.
- Icon button — Para un ícono que ejecuta una acción al hacer clic, con foco de teclado y aria-label.
- Badge — Para combinar un ícono y texto en una sola pieza que comunica un estado o una categoría.
- Tag — Para etiquetar un ítem con ícono y texto, con distintas apariencias semánticas.
- Text — Para cualquier contenido textual que Icon no puede remplazar.
Icon
| Name | Type | Default | Description |
|---|---|---|---|
source* | React.ReactNode | The SVG contents to display in the Icon. | |
color | 'ai-generative' | 'neutral-textLow' | Set the color for the SVG fill. Use "ai-generative" to apply the Nimbus AI generative gradient. |
cursor | 'auto' | 'inherit' | The cursor property specifies the mouse cursor to be displayed when pointing over an element. |
Icon.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.