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
import '@faststore/ui/src/components/atoms/Link/styles.scss'Usage
<Link href="/">A default link</Link>Props
The Link component supports all attributes supported by the tag chosen through the as prop.
For example, if someone wants to use a wrapper for any external link component (i.e., Next.js Link or Gatsby Link), the FastStore UI Link component can be used with the as="div" prop.
Besides those attributes, the following props are also supported:
| Name | Type | Description | Default |
|---|---|---|---|
| Coming Soon |
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
<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
<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
<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
<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"