Link

Links allow users to easily navigate through web pages.

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

Example

Code

Default Display Inline Small

Import

Import the component from @faststore/ui


_10import { 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:


_10@import '@faststore/ui/src/components/atoms/Link/styles.scss';

Follow the instructions in the Importing FastStore UI component styles tutorial.

Usage

A default link


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


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


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


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


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