Skip to main content

BuyButton

BuyButton intends to send the user to the checkout/cart step directly.

Overview

Loading...

Import

Import the component from @faststore/ui

import { BuyButton } from '@faststore/ui'

Import Styles

import '@faststore/ui/src/components/atoms/BuyButton/styles.scss'

Usage

Loading...

Props


Design Tokens

Local tokenDefault 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-hovervar(--fs-button-shadow-hover)

Customization

For further customization, you can use the following data attributes:

data-fs-buy-button

This component inherits Button CSS selectors and styles.


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.

Didn't find your answers? Ask the Community. For documentation suggestions, submit your feedback.

JOIN THE COMMUNITY