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

A default link

<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

Inverse Link

<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

Display Link

<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

Inline Link

<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

Small Link

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

Label List