⚠️ After March 18, 2024, the FastStore documentation will be migrated to the Developer Portal. For more information, access the official release note.

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:

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

<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

<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

<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

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