Icon button

4.1.2

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.

Default

Skeleton

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;

Anatomia do componente

O componente é composto por uma forma circular e por um ícone.

Guidelines

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.

Escolha do ícone

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.

AriaLabel

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.

Componentes relacionados

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.

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/icon-button

Props

Additional 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' 'div'	'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' 'neutral-interactiveHover' 'neutral-interactivePressed' 'neutral-surface' 'neutral-surfaceHighlight' 'primary-interactive' 'transparent'	'{ 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' 'neutral-surface' 'neutral-surfaceHighlight' 'transparent'	'{ 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	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.