Icon button
El componente Icon Button se usa cuando tenemos una acción clara para el usuario, que, según el contexto en el que se encuentra, puede ser fácilmente representada por un icono.
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;El componente se compone por una forma circular y un icono.
Usamos el Icon Button cuando tenemos una limitación de espacio o una acción que puede ser perfectamente representada por un icono. Su uso puede ser combinado con un Tooltip, mostrando una breve descripción de la acción a ser ejecutada, reforzando su entendimiento.
El icono debe dejar en claro cuál es la acción del Icon Button sin la necesidad de texto. Si no fuera posible resumir la acción en un icono debemos considerar el uso de otro componente.
Este componente no posee texto visible, por lo que posee una tag para facilitar su identificación por parte de personas con algún tipo de limitación visual o cognitiva. Por eso debemos agregar una descripción que deje en claro cuál es la acción que va a ser ejecutada mediante el botón.
Componente Button - Es usado para cambios de estado o página, en contextos donde no existe limitación de espacio o donde apenas un icono no es capaz de comunicar la acción.
Instalá el 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.