External Link
KExternalLink - a component to render an anchor tag (that opens in a new window) with an icon
html
<KExternalLink href="https://kongponents.konghq.com/">
Kongponents
</KExternalLink>
Props
href - required
The URL that the hyperlink points to.
NOTE
Must be a valid URL
Correct Usage
html
<KExternalLink href="https://kongponents.konghq.com/">
Valid URL
</KExternalLink>
Incorrect Usage
html
<KExternalLink href="https://kongponents">
Won't be rendered
</KExternalLink>
hideIcon
If true, icon won't be rendered.
html
<KExternalLink hide-icon href="https://kongponents.konghq.com/">
Kongponents
</KExternalLink>
Slots
default
- link text
Theming
Variable | Purpose |
---|---|
--KExternalLinkColor | Text and icon color |
--KExternalLinkColorHover | Text and icon color on mouse over |
An Example of changing the text color of KExternalLink to red might look like:
html
<template>
<div class="KExternalLink-wrapper">
<KExternalLink href="https://kongponents.konghq.com/">
Kongponents
</KExternalLink>
</div>
</template>
<style lang="scss">
.KExternalLink-wrapper {
--KExternalLinkColor: red;
--KExternalLinkColorHover: brown;
}
</style>