A link in a sentence — the one thing a button is not.
Import it from rei-kit:
import { BaseLink } from 'rei-kit'
Open BaseLink in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.
<script setup lang="ts">
import { BaseLink } from 'rei-kit'
</script>
<template>
<p>
Read the <BaseLink to="/docs">documentation</BaseLink>, or the
<BaseLink href="https://vuejs.org" external>Vue guide</BaseLink>.
</p>
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
to | string | Record<string, unknown> | undefined | A route. Uses `RouterLink`, so the app needs vue-router. |
href | string | undefined | A URL. Anything not on this site should be `external`. |
external | boolean | undefined | Opens in a new tab, with the mark and the `rel` that belong to that. |
tone | 'primary' | 'ink' | 'primary' | |
underline | 'always' | 'hover' | 'none' | 'hover' |
rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.