Link Button

Link Button is similar to a button, however acts as a link to navigate users between pages.

Overview

<LinkButton href="#">Link Button</LinkButton>

Import the component from @faststore/ui

import { LinkButton } from '@faststore/ui'

To apply the styles of this component in your FastStore project, import the following into your stylesheet:

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

Follow the instructions in the Importing FastStore UI component styles tutorial.

<LinkButton href="#">Link Button</LinkButton>

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.

This component inherits Button design tokens.

This component inherits Button variants.

Link Button

<LinkButton href="#" variant="primary">
  Link Button
</LinkButton>

Link Button

<LinkButton href="#" variant="primary" inverse>
  Link Button
</LinkButton>

Link Button

<LinkButton href="#" variant="secondary">
  Link Button
</LinkButton>

Link Button

<LinkButton href="#" variant="secondary" inverse>
  Link Button
</LinkButton>

Link Button

<LinkButton href="#" variant="tertiary">
  Link Button
</LinkButton>

Link Button

<LinkButton href="#" variant="tertiary" inverse>
  Link Button
</LinkButton>

Link Button

<LinkButton href="#" disabled>
  Link Button
</LinkButton>

Link Button

<LinkButton variant="primary" size="small">
  Link Button
</LinkButton>

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

data-fs-link-button

This component inherits Button CSS selectors and styles.

Use the LinkButton only to navigate the user between store pages. For general purposes, use the standard Button.