Link

Navigation link component with size variants and disabled state.

Open in Storybook

Interactive Demo

Default linkSmall linkDisabled

Usage

<script setup>
import { Link } from '@yellowcard/b2b-design-system';
</script>

<template>
  <Link label="View details" href="/details" size="medium" />
  <Link label="External" href="https://example.com" target="_blank" />
</template>

API Reference

Props

Prop	Type	Default	Description
label*	string	—	Link text
size	string	—	Text size variant
href	string	—	URL for native anchor
to	string | object	—	Vue Router destination
target	string	—	Link target (_blank, _self, etc.)
rel	string	—	Link rel attribute
disabled	boolean	false	Disabled state
activated	boolean	false	Active/current state
skeleton	boolean	false	Skeleton loading state