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.
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. | |
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" }' |
borderColor | 'neutral-interactive' | '{ 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" }' |
backgroundColor | 'neutral-interactive' | '{ 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" }' |
IconButton.Skeleton
| Name | Type | Default | Description |
|---|---|---|---|
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. | |
width | string | Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own. | |
data-testid | string | This is an attribute used to identify a DOM node for testing purposes. |