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.Example
Code
Usage
Import the component
_10import { IconButton } from '@faststore/ui'
Import styles
To apply styles, include the following in your stylesheet:
_10@import '@faststore/ui/src/components/atoms/Button/styles.scss';
For details, see Importing FastStore UI component styles.
Data attributes
You can target and override
IconButton
styles using the following data attributes:data-fs-icon-button
This component inherits Button CSS selectors and styles.
Props
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 |
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.