Documentation
Feedback
Guides
Storefront Development

Storefront Development
Storefront development
LinkButton

Acts as a link to navigate users between pages.

The LinkButton component is similar to a button, however acts as a link to navigate users between pages.
Example
Code

Usage

Import the component


_10
import { LinkButton } from "@faststore/ui";

Import styles

To apply styles, include the following in your stylesheet:

_10
@import "@faststore/ui/src/components/molecules/LinkButton/styles.scss";


Examples

Variants

This component inherits Button 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

Small

Example
Code

Icon


Design tokens

This component inherits Button design tokens.

Data attributes

You can target and override LinkButton styles using the following data attributes:
data-fs-link-button
This component inherits Button CSS selectors and styles.

Props

The LinkButton component supports all attributes supported by the tag a.
Besides those attributes, the following props are also supported Button Props:
NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-link-button
variant'primary' | 'secondary' | 'tertiary'Specifies the component color variant.primary
size'small' | 'regular'Specifies the size variant.regular
inversebooleanDefines the use of inverted colors.
disabledbooleanSpecifies that this button should be disabled.
iconReactNodeA React component that will be rendered as an icon.
iconPosition'left' | 'right'Specifies where the icon should be positioned.

Best Practices

✅ Do's

  • Use the LinkButton only to navigate the user between store pages. For general purposes, use the standard Button.
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
On this page