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.
Overview
Example
Code
Import
Import the component from @faststore/ui
_10import { Button } 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<Button variant="primary">Add to Cart</Button>
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 |
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) |
Nested Elements
Icon
_10<Button variant="primary" icon={<Icon name="ShoppingCart" />} iconPosition="left">_10 Add to Cart_10</Button>
| Local token | Default value/Global token linked |
|---|---|
--fs-button-icon-padding | 0 var(--fs-spacing-1) |
Hierarchy
Primary
_10<Button variant="primary">Button</Button>
| 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) |
Primary Inverse
_10<Button inverse variant="primary">_10 Button_10</Button>
| 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) |
Secondary
_10<Button variant="secondary">Button</Button>
| 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) |
Secondary Inverse
_10<Button inverse variant="secondary">_10 Button_10</Button>
| 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) |
Tertiary
_10<Button variant="tertiary">Button</Button>
| 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) |
Tertiary Inverse
_10<Button inverse variant="tertiary">_10 Button_10</Button>
| 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) |
Variants
Disabled
_10<Button variant="primary" disabled>_10 Button_10</Button>
| 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) |
Loading
Example
Code
No label
With label
Trigger
| Local token | Default value/Global token linked |
|---|---|
--fs-button-loading-label-column-gap | var(--fs-spacing-3) |
Small
_10<Button variant="primary" size="small">_10 Button_10</Button>_10<Button variant="primary" size="small" icon={<Icon name="ShoppingCart" />}>_10 Button_10</Button>
| 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) |
Use Cases
Use the
Button component to communicate user actions on the following components:Buy nowandAdd to cartbuttons on Product Cards.- Submit and/or withdraw actions on Modal windows.
Customization
For further customization, you can use the following data attributes:
data-fs-buttondata-fs-button-variant="primary | secondary | tertiary"data-fs-button-inversedata-fs-button-size="small | regular"data-fs-button-loading="true"Best Practices
✅ Do's
- Use standard button designs and shapes to make your button look 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, the button should change its state and let the user know that something is happening as a consequence.
- Define a style system for your button states (i.e., normal, focus, hover, active, pressed, disabled).
- 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 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, give preference to hiding 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-labelwhen the button already has a label.
Related components
- LinkButton
Similar to
See moreButton, but navigates users between pages instead of executing actions.