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.Example
Code
Usage
Import the component
_10import { LinkButton } from "@faststore/ui";
Import styles
To apply styles, include the following in your stylesheet:
_10@import "@faststore/ui/src/components/molecules/LinkButton/styles.scss";
For details, see Importing FastStore UI component styles.
Examples
Variants
This component inherits Button variants.
Primary
Example
Code
Primary Inverse
Example
Code
Secondary
Example
Code
Secondary Inverse
Example
Code
Tertiary
Example
Code
Tertiary Inverse
Example
Code
Disabled
Example
Code
Small
Example
Code
Icon
Design tokens
This component inherits Button design tokens.
Data attributes
You can target and override
LinkButton
styles using the following data attributes:data-fs-link-button
This component inherits Button CSS selectors and styles.
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. |
Best Practices
✅ Do's
- Use the
LinkButton
only to navigate the user between store pages. For general purposes, use the standard Button.