リンクに色をつけるには link 属性を使うことができます。
text-color 属性 とは異なり、:hover や :focus の状態を持ちます。
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色付きリンクは リンクユーティリティ でも変更できます。
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
リンクスタイルの中には、比較的明るい前景色を使うものがあり、十分なコントラストを持たせるために、暗い背景でのみ使用するべきです。