IconButton

IconButton

Use icons instead of labels in buttons.

The IconButton is an icon that trigger some sort of action, such as adding an item to the cart.

Overview

Example

Code

Import the component from @faststore/ui


_10import { IconButton } from '@faststore/ui'

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


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

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


_10<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.