⚠️ After March 18, 2024, the FastStore documentation will be migrated to the Developer Portal. For more information, access the official release note.

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

Import the component from @faststore/ui

import { LinkButton } from '@faststore/ui'

Import Styles into your FastStore project

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.


Usage

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

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.

Design Tokens

This component inherits Button design tokens.


Nested Elements

Icon


Variants

This component inherits Button variants.

Primary

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

Primary Inverse

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

Secondary

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

Secondary Inverse

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

Tertiary

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

Tertiary Inverse

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

Disabled

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

Small

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

Customization

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

data-fs-link-button

This component inherits Button CSS selectors and styles.


Best Practices

✅ Do's

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