Links and buttons

The principle

Link blue means "this takes you somewhere". It is reserved for navigation that reads as content. Two questions decide every case:

• What is it? If it navigates (changes the URL), it renders an <a>. If it does something on this page, it renders a <button>. Screen readers announce them differently, and only a link can open in a new tab.
• How should it look? Link blue is for navigation that reads as content: a link inside a sentence, or a standalone reference. UI navigation and every action use a button style.

Which to use

Links that leave the app

One icon, i-lucide-arrow-up-right, means "this leaves the app": a new tab, or a redirect to another site. It follows the common ground between Carbon(opens in new tab), GOV.UK(opens in new tab) and NN/g(opens in new tab).

• Standalone links that open a new tab (LinkCell external, plain or link buttons to PRs, tickets, docs) show the arrow. Buttons take it as trailing-icon; LinkCell adds it itself.
• Menu items that open a new tab (target: '_blank') take the arrow as their leading icon. DropdownMenu adds it when the item has none and appends the hidden "(opens in new tab)" text to the label.
• Links inside a sentence show the arrow too. TextLink adds it after the text, sized to the sentence.
• Every new-tab link is announced: TextLink, Button and LinkCell add hidden "(opens in new tab)" text for screen readers.
• In-app navigation never shows the arrow, and i-lucide-external-link is not used for links: one icon, one meaning.
• Open a new tab only when it keeps the user's place (docs or an external tool opened mid-flow, a PR opened from a table). Everything in-app opens in the same tab.

Guidelines

• Give a button that only navigates a to, not @click="navigateTo(...)". A real link can open in a new tab and is announced as a link.
• Use TextLink inside a sentence, a banner message or a form hint. A standalone "View all" or metadata link is Buttonvariant="plain" with to.
• Inside a Table, use its own links: createLinkColumn, createRowLinkColumn or <LinkCell>.
• Do not style an action as a link. "Forgot password?", "Resend code" and "Select all" act on the page, so they are variant="plain", not blue.
• Do not use Button variant="link" without to. It logs a dev warning pointing to variant="plain".
• Do not use TextLink without to, even in a Banner or Alert. An action there is a Button; TextLink logs a dev warning without to.

Examples

1<template>2  <p>3    Add a payment method in <TextLink to="/billing">billing settings</TextLink> to keep scanning.4  </p>5</template>

1<template>2  <Button variant="link" size="xs" to="https://www.hacktron.ai/docs" target="_blank" trailing-icon="i-lucide-arrow-up-right">3    Docs4  </Button>5</template>

1<template>2  <div class="flex items-center justify-between">3    <span>Recent scans</span>4    <Button variant="plain" size="xs" to="/scans">View all</Button>5  </div>6</template>

1<template>2  <p>3    2 filters applied.4    <Button variant="plain" size="sm" @click="clearFilters">Clear filters</Button>5  </p>6</template>

1<template>2  <Alert variant="warning" title="Seat limit reached">3    <template #description>4      You have used all available seats.5      <TextLink to="/billing">Upgrade plan</TextLink>6    </template>7  </Alert>8</template>