Link
Link performs the same behavior of a regular anchor tag (a), but can be used as any HTML tag and component, including specific Frameworks link components.
Overview
Import
Import the component from @faststore/ui
import { Link } 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/atoms/Link/styles.scsss';Follow the instructions in the Importing FastStore UI component styles tutorial.
Usage
<Link href="/">A default link</Link>Props
The Link component supports all attributes supported by the tag a.
If you need to use it as external link component (i.e., Next.js Link or Gatsby Link), the FastStore UI Link component can be used with the as={NextLink} prop.
Besides those attributes, the following props are also supported:
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-link |
| variant | 'default' | 'display' | 'inline' | Specifies the component variant. | default |
| size | 'small' | 'regular' | Specifies the size variant. | regular |
| inverse | boolean | Defines the use of inverted colors. | |
| as | string | PolymorphicComponentPropsWithRef | Defines how this component should behave. | a |
Design Tokens
| Local token | Default value/Global token linked |
|---|---|
--fs-link-min-width | auto |
--fs-link-min-height | var(--fs-link-min-width) |
--fs-link-padding | var(--fs-spacing-2) var(--fs-spacing-0) |
--fs-link-border-radius | var(--fs-border-radius) |
--fs-link-text-line-height | 1.5 |
--fs-link-text-color | var(--fs-color-link) |
--fs-link-text-color-visited | var(--fs-color-link-visited) |
--fs-link-text-decoration | none |
--fs-link-text-decoration-hover | underline |
--fs-link-transition-function | var(--fs-transition-function) |
--fs-link-transition-property | var(--fs-transition-property) |
--fs-link-transition-timing | var(--fs-transition-timing) |
Variants
Inverse
<Link inverse={true}>Inverse Link</Link>| Local token | Default value/Global token linked |
|---|---|
--fs-link-inverse-text-color | var(--fs-color-link-inverse) |
--fs-link-inverse-text-color-visited | var(--fs-link-inverse-text-color) |
Display
<Link variant="display">Display Link</Link>| Local token | Default value/Global token linked |
|---|---|
--fs-link-display-text-line-height | var(--fs-link-text-line-height) |
--fs-link-display-text-color | var(--fs-color-text-display) |
--fs-link-display-text-color-visited | var(--fs-link-display-text-color) |
Inline
<Link variant="inline">Inline Link</Link>| Local token | Default value/Global token linked |
|---|---|
--fs-link-inline-padding | 0 |
--fs-link-inline-text-decoration | underline |
--fs-link-inline-text-color | var(--fs-link-text-color) |
Size
Small
<Link size="small">Small Link</Link>| Local token | Default value/Global token linked |
|---|---|
--fs-link-small-text-size | var(--fs-text-size-1) |
--fs-link-small-padding | var(--fs-spacing-1) var(--fs-spacing-0) |
Customization
For further customization, you can use the following data attributes:
data-fs-link
data-fs-link-variant="default" | "display" | "inline"
data-fs-link-size="small" | "regular"
data-fs-link-inverse="true"