Documentation
Feedback
Guides
Storefront Development

Storefront Development
FastStoreUI componentsMolecules
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.

Overview


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


Import

Import the component from @faststore/ui

_10
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:

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

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

Usage


_10
<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


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

Primary Inverse


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

Secondary


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

Secondary Inverse


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

Tertiary


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

Tertiary Inverse


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

Disabled


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

Small


_10
<LinkButton variant="primary" size="small">
_10
Link Button
_10
</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.
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 3 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 3 contributors
On this page