Link
Links allow users to easily navigate through web pages.
2 min read
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.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
Display
Example
Code
Inline
Example
Code
Size
Small
Example
Code
Polymorphic link
The
as prop accepts an HTML element or React component. For example, render the FastStore Link styles and variants through a framework link component:
_10import NextLink from 'next/link'_10import { Link } from '@faststore/ui'_10_10export default function ProductsLink() {_10 return (_10 <Link as={NextLink} href="/products" variant="display">_10 Browse products_10 </Link>_10 )_10}
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
Inverse links use light colors optimized for dark backgrounds, ensuring proper contrast and readability in inverted color schemes.
| 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
Inline links are designed to blend within text content, featuring minimal padding and underlined text for clear identification within paragraphs.
| 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
Small links use reduced font size and padding to create a more compact appearance, ideal for dense layouts or secondary navigation elements.
| 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
Display links use prominent styling suitable for standalone navigation elements or headings, maintaining visual hierarchy while preserving link behavior.
| 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-linkdata-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 |