Documentation
Feedback
Guides
Storefront Development

Storefront Development
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

_10
import { IconButton } from '@faststore/ui'

Import Styles

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


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-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.
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page