Button

Buttons indicate actions that users can take.

Buttons indicate actions that users can take, such as adding an item to the cart, submitting a form, and proceeding with an operation. Use the Button component to communicate user actions for the following components:

Buy Now and Add to Cart buttons in Product Cards.
Submit or cancel actions on Modal dialogs.

Example

Code

Usage

Import the component


_10import { Button } 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.

Examples

Variants

Primary

Example

Code

Primary Inverse

Example

Code

Secondary

Example

Code

Secondary Inverse

Example

Code

Tertiary

Example

Code

Tertiary Inverse

Example

Code

Disabled

Example

Code

Loading

Example

Code

No label

With label

Trigger

Size

Small

Example

Code

Small with an icon

Example

Code

Button with an icon

Example

Code

Design tokens

Local token	Default value/Global token linked
`--fs-button-padding`	`calc(var(--fs-spacing-1) - (var(--fs-button-border-width) * 2)) var(--fs-spacing-3)`
`--fs-button-height`	`var(--fs-control-tap-size)`
`--fs-button-gap`	`var(--fs-spacing-2)`

`--fs-button-shadow`	`var(--fs-shadow)`
`--fs-button-shadow-hover`	`var(--fs-button-shadow)`

`--fs-button-border-radius`	`var(--fs-border-radius)`
`--fs-button-border-width`	`var(--fs-border-width-thick)`
`--fs-button-border-color`	`transparent`

`--fs-button-text-size`	`var(--fs-text-size-base)`
`--fs-button-text-weight`	`var(--fs-text-weight-bold)`

`--fs-button-transition-function`	`var(--fs-transition-function)`
`--fs-button-transition-property`	`var(--fs-transition-property)`
`--fs-button-transition-timing`	`var(--fs-transition-timing)`

Design tokens: Button with an icon

Buttons with icons reserve padding and alignment for the glyph and label, improving scannability while preserving clear touch targets and visual balance.

Local token	Default value/Global token linked
`--fs-button-icon-padding`	`0 var(--fs-spacing-1)`

Design tokens: Primary

Primary buttons use high-contrast colors and bold emphasis to highlight the main action on a page, drawing focus and encouraging completion.

Local token	Default value/Global token linked
`--fs-button-primary-text-color`	`var(--fs-color-primary-text)`
`--fs-button-primary-text-color-hover`	`var(--fs-button-primary-text-color)`
`--fs-button-primary-text-color-active`	`var(--fs-button-primary-text-color)`

`--fs-button-primary-bkg-color`	`var(--fs-color-primary-bkg)`
`--fs-button-primary-bkg-color-hover`	`var(--fs-color-primary-bkg-hover)`
`--fs-button-primary-bkg-color-active`	`var(--fs-color-primary-bkg-active)`

`--fs-button-primary-border-color`	`transparent`
`--fs-button-primary-border-color-hover`	`var(--fs-button-primary-border-color)`
`--fs-button-primary-border-color-active`	`var(--fs-button-primary-border-color)`

`--fs-button-primary-shadow-hover`	`var(--fs-button-shadow-hover)`

Design tokens: Primary Inverse

Primary inverse buttons adapt the primary style for dark or colored backgrounds, inverting surfaces and text to maintain prominence and accessible contrast.

Local token	Default value/Global token linked
`--fs-button-primary-inverse-text-color`	`var(--fs-button-primary-bkg-color)`
`--fs-button-primary-inverse-text-color-hover`	`var(--fs-button-primary-bkg-color)`
`--fs-button-primary-inverse-text-color-active`	`var(--fs-button-primary-bkg-color)`

`--fs-button-primary-inverse-bkg-color`	`var(--fs-button-primary-text-color)`
`--fs-button-primary-inverse-bkg-color-hover`	`var(--fs-color-primary-bkg-light)`
`--fs-button-primary-inverse-bkg-color-active`	`var(--fs-color-primary-bkg-light-active)`

`--fs-button-primary-inverse-border-color`	`var(--fs-button-primary-border-color)`
`--fs-button-primary-inverse-border-color-hover`	`var(--fs-button-primary-border-color)`
`--fs-button-primary-inverse-border-color-active`	`var(--fs-button-primary-border-color)`

`--fs-button-primary-inverse-shadow-hover`	`var(--fs-button-shadow-hover)`

Design tokens: Secondary

Secondary buttons apply moderate emphasis to support alternative actions, providing clear affordance without competing with the primary call to action.

Local token	Default value/Global token linked
`--fs-button-secondary-text-color`	`var(--fs-color-secondary-text)`
`--fs-button-secondary-text-color-hover`	`var(--fs-color-text-inverse)`
`--fs-button-secondary-text-color-active`	`var(--fs-button-secondary-text-color-hover)`

`--fs-button-secondary-bkg-color`	`var(--fs-color-secondary-bkg)`
`--fs-button-secondary-bkg-color-hover`	`var(--fs-color-secondary-bkg-hover)`
`--fs-button-secondary-bkg-color-active`	`var(--fs-color-secondary-bkg-active)`

`--fs-button-secondary-border-color`	`var(--fs-button-secondary-text-color)`
`--fs-button-secondary-border-color-hover`	`var(--fs-button-secondary-bkg-color-hover)`
`--fs-button-secondary-border-color-active`	`var(--fs-button-secondary-bkg-color-active)`

`--fs-button-secondary-shadow-hover`	`var(--fs-button-shadow-hover)`

Design tokens: Secondary Inverse

Secondary inverse buttons tune colors for dark or colored surfaces, preserving contrast and hierarchy while remaining visually subordinate to primary actions.

Local token	Default value/Global token linked
`--fs-button-secondary-inverse-text-color`	`var(--fs-button-secondary-text-color-hover)`
`--fs-button-secondary-inverse-text-color-hover`	`var(--fs-button-secondary-text-color)`
`--fs-button-secondary-inverse-text-color-active`	`var(--fs-button-secondary-inverse-text-color-hover)`

`--fs-button-secondary-inverse-bkg-color`	`var(--fs-button-secondary-bkg-color)`
`--fs-button-secondary-inverse-bkg-color-hover`	`var(--fs-button-secondary-text-color-hover)`
`--fs-button-secondary-inverse-bkg-color-active`	`var(--fs-color-secondary-bkg-light)`

`--fs-button-secondary-inverse-border-color`	`var(--fs-button-secondary-inverse-text-color)`
`--fs-button-secondary-inverse-border-color-hover`	`var(--fs-button-secondary-inverse-bkg-color-hover)`
`--fs-button-secondary-inverse-border-color-active`	`var(--fs-button-secondary-inverse-bkg-color-hover)`

`--fs-button-secondary-inverse-shadow-hover`	`var(--fs-button-shadow-hover)`

Design tokens: Tertiary

Tertiary buttons use minimal emphasis—often transparent backgrounds and subtle borders—for low-priority or inline actions that should not distract from primary tasks.

Local token	Default value/Global token linked
`--fs-button-tertiary-text-color`	`var(--fs-color-tertiary-text)`
`--fs-button-tertiary-text-color-hover`	`var(--fs-button-tertiary-text-color)`
`--fs-button-tertiary-text-color-active`	`var(--fs-button-primary-bkg-color)`

`--fs-button-tertiary-bkg-color`	`var(--fs-color-tertiary-bkg)`
`--fs-button-tertiary-bkg-color-hover`	`var(--fs-color-tertiary-bkg-hover)`
`--fs-button-tertiary-bkg-color-active`	`var(--fs-color-tertiary-bkg-active)`

`--fs-button-tertiary-border-color`	`transparent`
`--fs-button-tertiary-border-color-hover`	`var(--fs-button-tertiary-border-color)`
`--fs-button-tertiary-border-color-active`	`var(--fs-button-tertiary-border-color)`

`--fs-button-tertiary-shadow-hover`	`var(--fs-button-shadow-hover)`

Design tokens: Tertiary Inverse

Tertiary inverse buttons adjust low-emphasis styling for dark or colored backgrounds, ensuring legibility and subtle affordance without adding visual weight.

Local token	Default value/Global token linked
`--fs-button-tertiary-inverse-text-color`	`var(--fs-button-secondary-text-color-hover)`
`--fs-button-tertiary-inverse-text-color-hover`	`var(--fs-button-secondary-text-color-hover)`
`--fs-button-tertiary-inverse-text-color-active`	`var(--fs-button-secondary-text-color-hover)`

`--fs-button-tertiary-inverse-bkg-color`	`var(--fs-button-secondary-inverse-bkg-color)`
`--fs-button-tertiary-inverse-bkg-color-hover`	`var(--fs-button-primary-bkg-color-hover)`
`--fs-button-tertiary-inverse-bkg-color-active`	`var(--fs-button-primary-bkg-color-active)`

`--fs-button-tertiary-inverse-border-color`	`var(--fs-button-tertiary-border-color)`
`--fs-button-tertiary-inverse-border-color-hover`	`var(--fs-button-tertiary-border-color)`
`--fs-button-tertiary-inverse-border-color-active`	`var(--fs-button-tertiary-border-color)`

`--fs-button-tertiary-inverse-shadow-hover`	`var(--fs-button-shadow-hover)`

Design tokens: Disabled

Disabled buttons reduce contrast and suppress interactive feedback to clearly communicate inoperability while preserving layout and alignment.

Local token	Default value/Global token linked
`--fs-button-disabled-bkg-color`	`var(--fs-color-disabled-bkg)`
`--fs-button-disabled-text-color`	`var(--fs-color-disabled-text)`

Design tokens: Loading

Loading buttons allocate spacing and motion for progress feedback—optionally with a label—to indicate that an action is processing.

Local token	Default value/Global token linked
`--fs-button-loading-label-column-gap`	`var(--fs-spacing-3)`

Design tokens: Small

Small buttons tighten padding, height, and icon dimensions for dense layouts, balancing compactness with readability and usable tap targets.

Local token	Default value/Global token linked
`--fs-button-small-padding`	`var(--fs-spacing-0) var(--fs-spacing-1)`
`--fs-button-small-min-height`	`var(--fs-spacing-5)`
`--fs-button-small-gap`	`var(--fs-spacing-1)`

`--fs-button-small-icon-width`	`var(--fs-spacing-3)`
`--fs-button-small-icon-height`	`var(--fs-button-small-icon-width)`

Design tokens: Small with an icon

Small icon buttons fine-tune spacing and icon size in compact contexts, maintaining label clarity and alignment within tighter space constraints.

Local token	Default value/Global token linked
`--fs-button-small-padding`	`var(--fs-spacing-0) var(--fs-spacing-1)`
`--fs-button-small-min-height`	`var(--fs-spacing-5)`
`--fs-button-small-gap`	`var(--fs-spacing-1)`

`--fs-button-small-icon-width`	`var(--fs-spacing-3)`
`--fs-button-small-icon-height`	`var(--fs-button-small-icon-width)`

Data attributes

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

data-fs-button

data-fs-button-variant="primary | secondary | tertiary"

data-fs-button-inverse

data-fs-button-size="small | regular"

data-fs-button-loading="true"

Props

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).	`fs-button`
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.
icon	`string \| number \| false \| true \| {} \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`	A React component that will be rendered as an icon.
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	`left`

Best Practices

✅ Dos

Use standard button designs and shapes to make your button clearly clickable.
Use styles to communicate the importance of an action by visually differentiating primary and secondary buttons.
Make buttons finger-friendly for mobile users and large enough for reliable interactions. Generally, touch targets are at least 44 by 44 CSS pixels.
Use task-specific words to write button labels.
Place the buttons in an order that reflects a conversation between the user and the system.
Provide visual or audio feedback on interactions. Whenever a user interacts with a button, it should change its state to indicate that an action is taking place.
Define a style system for your button states (e.g., normal, focus, hover, active, pressed, disabled).
Use icon-only buttons only for widespread actions with highly standardized icons, such as a cross for closing.
Use the aria-label attribute to provide a textual alternative for icon-only buttons.

❌ Don'ts

Don't make users hunt for buttons. Place buttons where users expect to see them or can easily find them.
Don't rely on icons to communicate complex actions.
Don't use generic words that can potentially confuse users.
Avoid cluttering the UI with too many buttons.
Avoid having more than one primary action button on the screen at a time.
Avoid using disabled buttons, if possible. Instead, prefer to hide the unavailable option.
Don't place buttons next to Badges. Although badges and buttons are similar in appearance, badges are not interactive and may confuse users if not used in the proper context.
Don't use buttons as Links. Links are not intended to invite users to take action. Instead, they redirect users somewhere.
Avoid using aria-label when the button already has a label.

IconButton
A button that contains only an icon.
See more
BuyButton
A button with the intent of directly sending the user to the checkout or cart step.
See more
Link Button
LinkButton
Similar to Button, but navigates users between pages instead of executing actions.
See more

Usage

Import the component

Import styles

Examples

Variants

Primary

Primary Inverse

Secondary

Secondary Inverse

Tertiary

Tertiary Inverse

Disabled

Loading

No label

With label

Trigger

Size

Small

Small with an icon

Button with an icon

Design tokens

Design tokens: Button with an icon

Design tokens: Primary

Design tokens: Primary Inverse

Design tokens: Secondary

Design tokens: Secondary Inverse

Design tokens: Tertiary

Design tokens: Tertiary Inverse

Design tokens: Disabled

Design tokens: Loading

Design tokens: Small

Design tokens: Small with an icon

Data attributes

Props

Best Practices

✅ Dos

❌ Don'ts

Related components