---
title: Link
---

import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
import { ComponentDocs } from '@site/src/components/component-docs.js'
import * as jsdoc from '@site/prebuild/jsdoc/components.link.mjs'
import {
  AnchorLinkExample,
  CardLinkExample,
  LinkExample,
  SuccessLinkExample,
} from './_examples.js'


<DocusaurusDoc>

:::tip Styling and link behaviour
##### Styling
Due to the CSS reset used by Tailwind, one cannot assume links will be styled like you expect them to.
Use a component from this For this and other reasons, Link components exist.
##### Link behaviour
Withing a single-page application (SPA) --- like Docusaurus or NextJS and so on --- there is often a
`Link` component provided by the framework that provides client-side routing so that clicking a link
does not completely reload the page/application.

You can pass such a component in some of FreeSewing components to use it for links rather than a traditional `<a>` tag.
:::

The __Link__ component family provides the following components:

- [AnchorLink](#anchorlink)
- [CardLink](#cardlink)
- [Link](#link)
- [SuccessLink](#successlink)

## AnchorLink
<ComponentDocs docs={jsdoc.jsdocAnchorLink} example={AnchorLinkExample} />

## CardLink
<ComponentDocs docs={jsdoc.jsdocCardLink} example={CardLinkExample} />

## Link
<ComponentDocs docs={jsdoc.jsdocLink} example={LinkExample} />

## SuccessLink
<ComponentDocs docs={jsdoc.jsdocSuccessLink} example={SuccessLinkExample} />

</DocusaurusDoc>