Documentation
Feedback
Guides
Storefront Development

Storefront Development
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

Import

Import the component from @faststore/ui

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

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

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

Usage


_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:
NameTypeDescriptionDefault
testIdstringID 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
inversebooleanDefines the use of inverted colors.
asstring | PolymorphicComponentPropsWithRefDefines how this component should behave.a

Design Tokens

Local tokenDefault value/Global token linked
--fs-link-min-widthauto
--fs-link-min-heightvar(--fs-link-min-width)
--fs-link-paddingvar(--fs-spacing-2) var(--fs-spacing-0)
--fs-link-border-radiusvar(--fs-border-radius)
--fs-link-text-line-height1.5
--fs-link-text-color
var(--fs-color-link)
--fs-link-text-color-visited
var(--fs-color-link-visited)
--fs-link-text-decorationnone
--fs-link-text-decoration-hoverunderline
--fs-link-transition-functionvar(--fs-transition-function)
--fs-link-transition-propertyvar(--fs-transition-property)
--fs-link-transition-timingvar(--fs-transition-timing)

Variants

Inverse


_10
<Link inverse={true}>Inverse Link</Link>

Local tokenDefault 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


_10
<Link variant="display">Display Link</Link>

Local tokenDefault value/Global token linked
--fs-link-display-text-line-heightvar(--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


_10
<Link variant="inline">Inline Link</Link>

Local tokenDefault value/Global token linked
--fs-link-inline-padding0
--fs-link-inline-text-decorationunderline
--fs-link-inline-text-color
var(--fs-link-text-color)

Size

Small


_10
<Link size="small">Small Link</Link>

Local tokenDefault value/Global token linked
--fs-link-small-text-sizevar(--fs-text-size-1)
--fs-link-small-paddingvar(--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"
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page