IconButton
Icon Buttons are buttons that use icons instead of labels.
Icon Buttons are icons that trigger some sort of action, such as adding an item to the cart.
Overview
Example
Code
Import
Import the component from @faststore/ui
_10import { 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:
_10@import '@faststore/ui/src/components/atoms/Button/styles.scss';
Follow the instructions in the Importing FastStore UI component styles tutorial.
Usage
_10<IconButton icon={<Icon name="ShoppingCart" />} aria-label="Buy" />
Props
Customization
For further customization, you can use the following data attributes:
data-fs-icon-buttonThis 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-labelattribute to provide a textual alternative for icon-only buttons.
❌ Don'ts
- Don't rely on icons to communicate complex actions.