Link

Links allow users to easily navigate through web pages.

The Link component behaves like a regular anchor tag (a), but it can be rendered as any HTML tag or component, including specific framework link components.

Example

Code

Default Display Inline Small

Usage

Import the component


_10import { Link } from '@faststore/ui'

Import styles

To apply styles, include the following in your stylesheet:


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

For details, see Importing FastStore UI component styles.

Examples

Variants

Inverse

Example

Code

Inverse Link

Display

Example

Code

Display Link

Inline

Example

Code

Inline Link

Size

Small

Example

Code

Small Link

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)`

Design tokens: Inverse

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)`

Design tokens: Inline

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)`

Design tokens: Small

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)`

Design tokens: Display

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)`

Data attributes

You can target and override Link styles using 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"

Props

The Link component supports all attributes supported by the a tag. If you need to use it as an 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`