```ts import Link from "~/components/ui/Link.vue" ``` # Link Users can navigate by following Links. They expect that in contrast to clicking a [button](button), following a link does not manipulate items or trigger any action. This component will render as [an `` element [MDN]](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a). ```vue-html Home ``` Home Instead of a route, you can set the prop `to` to any web address starting with `http`. ## `Active` states - If any ancestor path matches, the `.router-link-active` class is added - If the whole path matches, the `.router-link-exact-active` class is added See the [Vue docs](https://router.vuejs.org/guide/essentials/active-links) for a primer on Path matching. In addition to the standard Vue `RouterLink` path matching function, we use this algorithm: - If the destination of the link contains any query parameter _and_ none of these is set (i.e. they are all `undefined`), then the class `.router-link-no-matching-query-flags` is added. This is particularly useful for modals. Open modal ## Colors and Variants See [Using color](/using-color)

A paragraph of text with an inline (uncolored) link: no color

default primary secondary destructive default solid primary solid secondary solid destructive solid _Only use on top of solid surfaces, else the text may be unreadable!_ {{ color }} outline default ghost primary ghost secondary ghost destructive ghost ## Shapes ```vue-html Home ``` Home ## Set width and alignment See [Using width](/using-width) and [Using alignment](/using-alignment). ```vue-html min-content tiny buttonWidth small medium full auto

🐌 🐌 🐌 ``` min-content tiny buttonWidth small medium full auto