Documentation
Feedback
Guides
Storefront Development

Storefront Development
Link Button

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

Link Button 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

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


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
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page