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
_10import { 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:
| 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. |
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-buttonThis component inherits Button CSS selectors and styles.
Best Practices
✅ Do's
- Use the
LinkButtononly to navigate the user between store pages. For general purposes, use the standard Button.