UI Components
Molecules
Icon Button

IconButton

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

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

Usage

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

Props

NameTypeDescriptionDefault
Coming Soon

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.
GiftInput Field