LinkButton

Acts as a link to navigate users between pages.

Source code

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

Example

Code

Link Button

Usage

Import the component


_10import { 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";

For details, see Importing FastStore UI component styles.

Examples

Variants

This component inherits Button variants.

Primary

Example

Code

Link Button

Primary Inverse

Example

Code

Link Button

Secondary

Example

Code

Link Button

Secondary Inverse

Example

Code

Link Button

Tertiary

Example

Code

Link Button

Tertiary Inverse

Example

Code

Link Button

Disabled

Example

Code

Link Button

Small

Example

Code

Link Button

Icon

Go to Cart

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:

Name	Type	Description	Default
testId	`string`	ID 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`
inverse	`boolean`	Defines the use of inverted colors.
disabled	`boolean`	Specifies that this button should be disabled.
icon	`ReactNode`	A 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.