Icon button
O componente Icon Button é utilizado quando temos uma ação clara ao usuário, levando em conta o contexto na qual se encontra, podendo ser facilmente representada por um ícone.
import 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;O componente é composto por uma forma circular e por um ícone.
Utilizamos o Icon Button quando temos uma limitação de espaço ou uma ação pode ser representada perfeitamente por um ícone, o seu uso pode ser combinado com o Tooltip, mostrando uma breve descrição da ação a ser executada.
O ícone deve deixar claro qual a ação do Icon Button sem a necessidade texto, se não for possível resumir a ação em um ícone devemos considerar o uso de outro componente.
Esse componente não possui texto visível, porém ele possui uma tag para facilitar sua identificação por pessoas com algum tipo de limitação visual ou cognitiva. Por isso precisamos agregar uma descrição que deixe clara qual a ação que está por trás do ícone escolhido.
Componente Button - É utilizado para mudanças de estado ou de página, em contextos onde não existe limitação de espaço ou onde apenas um ícone não é capaz de comunicar a sua ação.
Instale o componente via terminal.
npm install @nimbus-ds/icon-buttonAdditional props are passed to the <IconButton> element. See button docs for a list of props accepted by the <IconButton> element.