Icon
Permite exibir um ícone da biblioteca do Nimbus dentro ou junto de outro conteúdo, para reforçar visualmente uma ação, um estado ou uma mensagem.
- Reforçar um texto ou um estado: exibir um ícone junto de um texto ou dentro de outro componente para reforçar visualmente seu significado, sem substituí-lo. Ex.: um ícone de caminhão junto ao estado "Enviado" de um pedido.
- Aplicar o estilo de IA/Lumi: usar color="ai-generative" para destacar um ícone vinculado a uma ação ou a um conteúdo gerado ou assistido por inteligência artificial. Ex.: o ícone que acompanha uma sugestão da Lumi.
- Ilustrar uma seção ou um item de navegação: distinguir visualmente as seções de um menu, uma sidebar ou uma lista de opções. Ex.: o ícone de cada seção do painel de administração.
- Executar uma ação ao clicar: Icon não gerencia foco de teclado nem eventos de interação próprios. Nesse caso, usar Icon button, que adiciona o comportamento de botão e seu aria-label.
- Comunicar um estado por si só, sem texto: um ícone isolado não é suficiente para transmitir um estado com clareza. Nesse caso, usar Badge ou Tag, que combinam ícone e texto em uma única peça.
- Exibir conteúdo textual: Icon aceita apenas uma forma vetorial como source. Nesse caso, usar Text para qualquer conteúdo de texto.
Icon
- Icon: forma vetorial passada pela prop source, extraída da biblioteca @nimbus-ds/icons; é o único conteúdo visível do componente.
neutral-textLow (valor padrão): usar na maioria dos casos, quando o ícone acompanha um texto neutro e não precisa se distinguir por cor. Ex.: o ícone de um item de menu.
currentColor: herdar a cor de texto do elemento que envolve o ícone, para que combine automaticamente com o texto que o acompanha. Ex.: um ícone dentro de um Button que já define sua própria cor.
primary-interactive: usar em um ícone vinculado a um elemento interativo, como um link ou uma ação principal. Ex.: o ícone de um link destacado.
success-textLow: comunicar um resultado positivo ou uma confirmação, junto de um texto da mesma cor. Ex.: o ícone de um pedido entregue.
warning-textLow: alertar sobre uma condição que requer atenção, sem chegar a ser um erro, junto de um texto da mesma cor. Ex.: o ícone de estoque baixo.
danger-textLow: comunicar um erro ou um estado negativo, junto de um texto da mesma cor. Ex.: o ícone de um pagamento rejeitado.
ai-generative: aplicar o degradê de IA/Lumi do Nimbus a um ícone vinculado a uma ação ou a conteúdo gerado por inteligência artificial. Ex.: o ícone que representa uma sugestão da Lumi.
Icon aparece embutido dentro ou junto de outro conteúdo: como parte de um Badge ou uma Tag, junto de um Text que descreve um estado, dentro de um item de menu ou de um Toast, ou como o conteúdo visível de um Icon button.
Entregue
Produto sem estoque
Acompanhar o ícone com texto quando ele comunica um estado, para que o significado não dependa só da cor.
Evitar deixar o ícone como única fonte de informação de um estado, sem texto que o acompanhe.
Usar Icon button para um ícone que executa uma ação: adiciona foco de teclado e aria-label.
Evitar simular um botão com Icon e cursor="pointer": não é focável nem acessível por teclado.
- Reforço visual, não único canal de informação: quando o ícone comunica um estado ou uma categoria, acompanhá-lo com texto ou com um componente que já combine os dois (Badge, Tag), para que o significado não dependa só da forma ou da cor do ícone.
- Etiqueta acessível quando o ícone aparece isolado: se Icon for usado sem texto visível que explique sua função, passar um aria-label como atributo adicional; ele é aplicado ao elemento que envolve o ícone. Se além disso executar uma ação, usar Icon button, que já declara seu próprio aria-label.
- Não interativo por si só: Icon não adiciona foco de teclado nem trata eventos de teclado. Se precisar responder a um clique, usar Icon button em vez de adicionar um cursor ou um onClick sobre Icon.
- Contraste da cor: ao escolher um token de cor, verificar se mantém contraste suficiente contra o fundo em que é usado, principalmente com tons claros dentro de uma superfície clara.
Instale o componente via 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;As propriedades adicionais são repassadas ao elemento <Icon>. Consulte a documentação do elemento div para ver a lista de atributos aceitos.
- Icon button — Para um ícone que executa uma ação ao clicar, com foco de teclado e aria-label.
- Badge — Para combinar um ícone e texto em uma única peça que comunica um estado ou uma categoria.
- Tag — Para etiquetar um item com ícone e texto, com diferentes aparências semânticas.
- Text — Para qualquer conteúdo textual que Icon não pode substituir.
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. |
Ajude-nos a melhorar a documentação
Encontrou um problema ou tem uma sugestão? Conte para a gente.