IconButton

Use icons instead of labels in buttons.

1 min read

The IconButton is an icon that trigger some sort of action, such as adding an item to the cart.

Example

Code

Usage


_10import { IconButton } from '@faststore/ui'

To apply styles, include the following in your stylesheet:


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

You can target and override IconButton styles using the following data attributes:

data-fs-icon-button

This component inherits Button CSS selectors and styles.

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

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.