UI Components
Molecules
Link Button

Link Button

Link Button is similar to a button, however acts as a link to navigate users between pages.

Overview

Link Button
<LinkButton href="#">Link Button</LinkButton>

Import

Import the component from @faststore/ui

import { LinkButton } from '@faststore/ui'

Import Styles

import '@faststore/ui/src/components/molecules/LinkButton/styles.scss'

Usage

Link Button
<LinkButton href="#">Link Button</LinkButton>

Props

NameTypeDescriptionDefault
Coming Soon

Design Tokens

This component inherits Button design tokens.

Nested Elements

Icon

Go to CartGo to Cart

Variants

This component inherits Button variants.

Primary

Link Button

<LinkButton href="#" variant="primary">
  Link Button
</LinkButton>

Primary Inverse

Link Button

<LinkButton href="#" variant="primary" inverse>
  Link Button
</LinkButton>

Secondary

Link Button

<LinkButton href="#" variant="secondary">
  Link Button
</LinkButton>

Secondary Inverse

Link Button

<LinkButton href="#" variant="secondary" inverse>
  Link Button
</LinkButton>

Tertiary

Link Button

<LinkButton href="#" variant="tertiary">
  Link Button
</LinkButton>

Tertiary Inverse

Link Button

<LinkButton href="#" variant="tertiary" inverse>
  Link Button
</LinkButton>

Disabled

Link Button

<LinkButton href="#" disabled>
  Link Button
</LinkButton>

Small

Link Button

<LinkButton variant="primary" size="small">
  Link Button
</LinkButton>

Customization

For further customization, you can use the following data attributes:

data-fs-link-button

This component inherits Button CSS selectors and styles.

Best Practices

✅ Do's

  • Use the LinkButton only to navigate the user between store pages. For general purposes, use the standard Button.
Input FieldModal