⚠️ After March 18, 2024, the FastStore documentation will be migrated to the Developer Portal. For more information, access the official release note.

Icon Button

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

Overview


Import

Import the component from @faststore/ui

import { IconButton } from '@faststore/ui'

Import Styles into your FastStore project

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.


Usage

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

Props

NameTypeDescriptionDefault
testIdstringID 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> | ReactPortalA React component that will be rendered as an icon.
aria-label*stringA Label should be provided.
variant"primary" | "secondary" | "tertiary"Specifies the component color variant.
size"small" | "regular"Specifies the size variant.regular
inversefalse | trueDefines the use of inverted colors.
disabledfalse | trueSpecifies that this button should be disabled.
loadingfalse | trueBoolean that represents a loading state.
loadingLabelstringSpecifies a label for loading state.
iconPosition"left" | "right"Specifies where the icon should be positioned

Customization

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

data-fs-icon-button

This component inherits Button CSS selectors and styles.


Best practices

✅ Do's

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

❌ Don'ts

  • Don't rely on icons to communicate complex actions.