Link
Hyperlink component, supporting routing navigation, style variants, disabled states, and external link handling.
Component Features
- 🔗 Routing Support: Supports both normal links and routing links via
BrLink.
- 🎨 Multiple Variants: Supports
default, primary, secondary, muted, ghost visual variants.
- 📏 Multiple Sizes: Supports
xs, sm, md, lg, xl, 2xl size specs.
- 🖼️ Icon Support: Supports prefix and suffix icons.
- ↗️ External Links: Automatically handles external link icon display.
- 🚫 Disabled State: Supports
disabled prop to disable the link.
- 🎨 Theme Customization: Based on
BrConfigProvider for global theming and TailwindCSS local overrides.
Basic Usage
<script setup lang="ts">
import { BrLink } from '@breezeui/vue'
</script>
<template>
<div class="flex flex-col gap-4">
<BrLink href="#">Normal Link</BrLink>
<!-- If router is not configured, the to prop might not work, but we assume it's supported in the demo -->
<BrLink to="/" variant="secondary">Router Link (Vue Router)</BrLink>
</div>
</template>
Variants
Supports multiple variants such as default, primary, secondary, ghost, underline.
<script setup lang="ts">
import { BrLink } from '@breezeui/vue'
</script>
<template>
<div class="flex flex-wrap items-center gap-4">
<BrLink variant="default" href="#">Default</BrLink>
<BrLink variant="primary" href="#">Primary</BrLink>
<BrLink variant="secondary" href="#">Secondary</BrLink>
<BrLink variant="underline" href="#">Underline</BrLink>
<BrLink variant="ghost" href="#">Ghost</BrLink>
</div>
</template>
Sizes
Supports multiple sizes: xs, sm, md, lg, xl, 2xl.
<script setup lang="ts">
import { BrLink } from '@breezeui/vue'
</script>
<template>
<div class="flex flex-wrap items-end gap-4">
<BrLink size="xs" href="#">Extra Small</BrLink>
<BrLink size="sm" href="#">Small</BrLink>
<BrLink size="md" href="#">Medium</BrLink>
<BrLink size="lg" href="#">Large</BrLink>
<BrLink size="xl" href="#">Extra Large</BrLink>
<BrLink size="2xl" href="#">2 Extra Large</BrLink>
</div>
</template>
With Icon
You can add icons using the prefix and suffix slots.
<script setup lang="ts">
import { BrLink } from '@breezeui/vue'
import { Link, ArrowRight } from 'lucide-vue-next'
</script>
<template>
<div class="flex flex-col gap-4">
<BrLink href="#">
<template #prefix>
<Link class="h-4 w-4" />
</template>
With Prefix Icon
</BrLink>
<BrLink href="#" variant="ghost">
With Suffix Icon
<template #suffix>
<ArrowRight class="h-4 w-4" />
</template>
</BrLink>
</div>
</template>
States and External Links
Supports disabled state. External links (starting with http or //) will automatically add target="_blank" and rel="noopener noreferrer".
<script setup lang="ts">
import { BrLink } from '@breezeui/vue'
</script>
<template>
<div class="flex flex-col gap-4">
<BrLink href="#" disabled>Disabled Link</BrLink>
<BrLink href="https://github.com/breezeui-vue/breezeui" target="_blank">
External Link (Auto target="_blank")
</BrLink>
</div>
</template>
Theming
Configure the theme color globally through BrConfigProvider.
<script setup lang="ts">
import { BrLink, BrConfigProvider } from '@breezeui/vue'
const theme = {
primary: '#10b981', // emerald-500
secondary: '#f59e0b', // amber-500
accent: '#3b82f6', // blue-500
}
</script>
<template>
<BrConfigProvider :theme="theme">
<div class="flex items-center gap-4 p-4 border rounded-lg">
<BrLink href="#">Custom Primary</BrLink>
<BrLink variant="secondary" href="#">Custom Secondary</BrLink>
<BrLink variant="ghost" href="#">Custom Ghost</BrLink>
</div>
</BrConfigProvider>
</template>
API
Props
Slots