Link

Styled anchor elements with no wrapper component required -- just add CSS classes to native <a> tags. Use links for in-page navigation, external references, and any clickable text that isn't a button action.

<!-- Import via @cocoar/vue-ui/styles -->

Basic Link

The default style applies an accent color with an underline on hover, making links instantly recognizable in any context.

Default link

vue

<template>
  <a class="coar-link" href="javascript:void(0)">Default link</a>
</template>

Variants

Use the accent variant (default) for primary navigation and calls to action. Switch to subtle when the link should blend into surrounding body text.

Accent link (default) — Primary interactive text

Subtle link — Secondary actions, less emphasis

vue

<template>
  <div style="display: flex; flex-direction: column; gap: 8px;">
    <div><a class="coar-link" href="javascript:void(0)">Accent link (default)</a> — Primary interactive text</div>
    <div><a class="coar-link coar-link--subtle" href="javascript:void(0)">Subtle link</a> — Secondary actions, less emphasis</div>
  </div>
</template>

Sizes

Three size modifiers align with the typography scale, so links stay proportional whether they appear in footnotes or headings.

Small link — Compact contexts

Default link — Body text size

Large link — Prominent CTAs

vue

<template>
  <div style="display: flex; flex-direction: column; gap: 8px;">
    <div><a class="coar-link coar-link--sm" href="javascript:void(0)">Small link</a> — Compact contexts</div>
    <div><a class="coar-link" href="javascript:void(0)">Default link</a> — Body text size</div>
    <div><a class="coar-link coar-link--lg" href="javascript:void(0)">Large link</a> — Prominent CTAs</div>
  </div>
</template>

Disabled State

Combine the aria-disabled attribute with the disabled class to visually and semantically deactivate a link while keeping it in the DOM for accessibility.

Active link

Disabled link

vue

<template>
  <div style="display: flex; flex-direction: column; gap: 8px;">
    <div><a class="coar-link" href="javascript:void(0)">Active link</a></div>
    <div><a class="coar-link coar-link--disabled" href="javascript:void(0)" aria-disabled="true">Disabled link</a></div>
  </div>
</template>

Inline Usage

Links are designed to sit naturally inside running prose without disrupting line height or text flow.

The COAR Design System is built on top of Vue 3 and uses the Temporal API for date/time handling. See the Getting Started guide or browse the full component reference for more details.

vue

<template>
  <p style="margin: 0; font-size: 14px; line-height: 1.6;">
    The COAR Design System is built on top of
    <a class="coar-link" href="javascript:void(0)">Vue 3</a> and uses the
    <a class="coar-link" href="javascript:void(0)">Temporal API</a> for date/time handling.
    See the <a class="coar-link" href="javascript:void(0)">Getting Started guide</a> or
    browse the <a class="coar-link coar-link--subtle" href="javascript:void(0)">full component reference</a>
    for more details.
  </p>
</template>

API

CSS Classes

Class	Description
.coar-link	Base link style — accent color, underline on hover
.coar-link--subtle	Subtle variant with less color emphasis
.coar-link--sm	Small text size
.coar-link--lg	Large text size
.coar-link--disabled	Disabled appearance (use with aria-disabled)