Link

Textual navigation links with status styles.

Basic Usage

vue

<template>
  <bp-space>
    <bp-link>Link</bp-link>
    <bp-link status="success">Link</bp-link>
    <bp-link status="warning">Link</bp-link>
    <bp-link status="danger">Link</bp-link>
    <bp-link status="gray">Link</bp-link>
  </bp-space>
</template>

Size

size supports mini, small, default, and large.

vue

<template>
  <bp-space>
    <bp-link size="mini">mini link</bp-link>
    <bp-link size="small">small link</bp-link>
    <bp-link>default link</bp-link>
    <bp-link size="large">large link</bp-link>
  </bp-space>
</template>

Disabled and Loading

Combine disabled, loading, and loading-icon (1-5).

Disabled link

Loading (icon 3)

vue

<template>
  <bp-space>
    <bp-link disabled>Disabled link</bp-link>
    <bp-link loading>Loading</bp-link>
    <bp-link loading :loading-icon="3">Loading (icon 3)</bp-link>
  </bp-space>
</template>

With Icon

Add an icon, and optionally set href with target="_blank".

Download

GitHub

vue

<template>
  <bp-space>
    <bp-link :icon="IconSearchLine">Search</bp-link>
    <bp-link :icon="IconDownloadLine" status="success">Download</bp-link>
    <bp-link href="https://github.com" target="_blank" :icon="IconExternalLinkLine">GitHub</bp-link>
  </bp-space>
</template>

<script setup lang="ts">
import { IconSearchLine, IconDownloadLine, IconExternalLinkLine } from "birdpaper-icon";
</script>

Link Props

href	Link href	String	-	-
status	Status type	String	primary	-
disabled	Whether disabled	Boolean	-	-
loading	Whether loading	Boolean	-	-
loading-icon	Loading icon	NumberIcon	1	-
size	Size	String	default	-
icon	Icon	Component	-	-
target	Open target	String	_self	-

Link Slots

default

Content

Link ​

Basic Usage ​

Size ​

Disabled and Loading ​

With Icon ​

Link Props ​