BuyButton
Sends the user to the checkout/cart step directly.
The
BuyButton component intends to send the user to the checkout/cart step directly.Example
Code
Usage
Import the component
_10import { BuyButton } from '@faststore/ui'
Import styles
To apply styles, include the following in your stylesheet:
_10@import '@faststore/ui/src/components/atoms/BuyButton/styles.scss';
For details, see Importing FastStore UI component styles.
Design tokens
| Local token | Default value/Global token linked |
|---|---|
--fs-buy-button-text-color | var(--fs-color-action-text) |
--fs-buy-button-text-color-hover | var(--fs-color-action-text) |
--fs-buy-button-text-color-active | var(--fs-color-action-text) |
--fs-buy-button-bkg-color | var(--fs-color-action-bkg) |
--fs-buy-button-bkg-color-hover | var(--fs-color-action-bkg-hover) |
--fs-buy-button-bkg-color-active | var(--fs-color-action-bkg-active) |
--fs-buy-button-border-color | var(--fs-color-action-bkg) |
--fs-buy-button-border-color-hover | var(--fs-color-action-bkg-hover) |
--fs-buy-button-border-color-active | var(--fs-color-action-bkg-active) |
--fs-buy-button-shadow-hover | var(--fs-button-shadow-hover) |
Data attributes
You can target and override
BuyButton styles using the following data attributes:data-fs-buy-buttonThis 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-buy-button |
| variant | "primary" | "secondary" | "tertiary" | Specifies the component color variant. | |
| size | "small" | "regular" | Specifies the size variant. | |
| 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 |
Best Practices
✅ Do's
- Use this special Button only to send the user to the checkout/cart step directly. For general purposes, use the standard Button.