You can use the link attribute to colorize links. Unlike the text-color attribute ,
these classes have a :hover and :focus state.
vue
<template>
<Anchor
color="primary"
to="#"
>
Primary link
</Anchor>
<Anchor
color="secondary"
to="#"
>
Secondary link
</Anchor>
<Anchor
color="success"
to="#"
>
Success link
</Anchor>
<Anchor
color="danger"
to="#"
>
Danger link
</Anchor>
<Anchor
color="warning"
to="#"
>
Warning link
</Anchor>
<Anchor
color="info"
to="#"
>
Info link
</Anchor>
<Anchor
color="light"
to="#"
>
Light link
</Anchor>
<Anchor
color="dark"
to="#"
>
Dark link
</Anchor>
</template>
Link Utilities
Added in v5.3.0 Colored links can also be changed with the link utility.
vue
<template>
<p>
<Anchor
color="primary"
link-offset="2"
link-underline="25 100-hover"
to="/"
>
Primary link
</Anchor>
</p>
<p>
<Anchor
color="secondary"
link-offset="2"
link-underline="25 100-hover"
to="/"
>
Secondary link
</Anchor>
</p>
<p>
<Anchor
color="success"
link-offset="2"
link-underline="25 100-hover"
to="/"
>
Success link
</Anchor>
</p>
<p>
<Anchor
color="danger"
link-offset="2"
link-underline="25 100-hover"
to="/"
>
Danger link
</Anchor>
</p>
<p>
<Anchor
color="warning"
link-offset="2"
link-underline="25 100-hover"
to="/"
>
Warning link
</Anchor>
</p>
<p>
<Anchor
color="info"
link-offset="2"
link-underline="25 100-hover"
to="/"
>
Info link
</Anchor>
</p>
<p>
<Anchor
color="light"
link-offset="2"
link-underline="25 100-hover"
to="/"
>
Light link
</Anchor>
</p>
<p>
<Anchor
color="dark"
link-offset="2"
link-underline="25 100-hover"
to="/"
>
Dark link
</Anchor>
</p>
<p>
<Anchor
color="body-emphasis"
link-offset="2"
link-underline="25 75-hover"
to="/"
>
Emphasis link
</Anchor>
</p>
</template>
TIP
Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.