<template>
<w-stack direction="column" gap="large">
<w-link href="/foundations">
This is an anchor link to "Foundations" page
</w-link>
<w-link to="/components">
This is a Vue Router link to link to "Components" page
</w-link>
<w-link href="/foundations" leading-icon="arrow-left" trailing-icon="arrow-right">
This is an anchor link to "Foundations" page
</w-link>
<w-link href="https://watson.docplanner.design/" target="_blank">
This is a link to "Watson documentation" page with native target attribute
</w-link>
</w-stack>
</template>
Attributes
Attribute inheritance is enabled for WLink component. It means that any non-property attribute will still be applied to the root of the component (i.e. target attribute).
Props
|
Name |
Description |
Type |
Default |
Values |
|---|---|---|---|---|
|
color-inherit |
Specifies whether the link should inherit `color` from the parent container |
boolean |
|
false, true |
|
href |
URL value |
string |
|
|
|
leading-icon |
Displays an icon to the left of the label. |
string |
|
icon name (i.e. "alarm-clock") |
|
trailing-icon |
Displays an icon to the right of the label. |
string |
|
icon name (i.e. "alarm-clock") |
Slots
|
Name |
Description |
|---|---|
|
default |
Default content slot |