Link

Hyperlink component, supporting routing navigation, style variants, disabled states, and external link handling.

Based on BrConfigProvider for global theme configuration, supporting both normal links and routing links.

Basic Usage

Normal LinkRouter Link (Vue Router)

Example

Variants

Supports multiple variants such as default, primary, secondary, ghost, underline.

DefaultPrimarySecondaryUnderlineGhost

Example

Sizes

Supports multiple sizes: xs, sm, md, lg, xl, 2xl.

Extra SmallSmallMediumLargeExtra Large2 Extra Large

Example

With Icon

You can add icons using the prefix and suffix slots.

With Prefix Icon With Suffix Icon

Example

States and External Links

Supports disabled state. External links (starting with http or //) will automatically add target="_blank" and rel="noopener noreferrer".

Disabled Link External Link (Auto target="_blank")

Example

Theming

Configure the theme color globally through BrConfigProvider.

Custom PrimaryCustom SecondaryCustom Ghost

Example

API

Props

Name	Type	Default	Description
variant	string	'default'	Style variants: default, primary, secondary, ghost, underline
size	string	'md'	Sizes: xs, sm, md, lg, xl, 2xl
href	string	-	Native link address
to	string | object	-	Routing target (requires vue-router)
disabled	boolean	false	Whether it is disabled
target	string	-	Link open method
rel	string	-	Link relationship attribute
as	string | object	-	The rendered tag or component

Slots

Name	Description
default	Link content
prefix	Prefix content (like an icon)
suffix	Suffix content (like an icon)