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'

To apply the styles of this component in your FastStore project, import the following into your stylesheet:

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

Follow the instructions in the Importing FastStore UI component styles tutorial.

<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>> \| Iterable<ReactNode> \| 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.