Icon Button

Icon Buttons are icons that trigger some sort of action, such as adding an item to the cart.

Overview

Import the component from @faststore/ui

import { IconButton } from '@faststore/ui'

Import Styles

import '@faststore/ui/src/components/atoms/Button/styles.scss'

<IconButton icon={<Icon name="ShoppingCart" />} aria-label="Buy" />

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).	`fs-icon-button`
icon*	`string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| ReactFragment \| ReactPortal`	A React component that will be rendered as an icon.
aria-label*	`string`	A Label should be provided.
variant	`"primary" \| "secondary" \| "tertiary"`	Specifies the component color variant.
size	`"small" \| "regular"`	Specifies the size variant.	`regular`
inverse	`false \| true`	Defines the use of inverted colors.
disabled	`false \| true`	Specifies that this button should be disabled.
loading	`false \| true`	Boolean that represents a loading state.
loadingLabel	`string`	Specifies a label for loading state.
iconPosition	`"left" \| "right"`	Specifies where the icon should be positioned

For further customization, you can use the following data attributes:

data-fs-icon-button

This component inherits Button CSS selectors and styles.

Use icon-only buttons only for widespread actions with highly standardized icons, such as a cross for close.
Use the aria-label attribute to provide a textual alternative for icon-only buttons.