Link
Follow an underlined link in text, marked when it opens a new tab.
ORD-1041
Paid on Sep 12; the receipt is in the order's files. The parcel can be followed on the carrier's site opens in a new tab. Questions go to orders@example.com or +1 555 0100.
<script setup lang="ts">import { UiCard, UiLink } from 'grani'</script> <template> <UiCard title="ORD-1041" class="w-full max-w-md"> <p class="text-sm text-fg"> Paid on Sep 12; the receipt is in <UiLink to="/components/card">the order's files</UiLink>. The parcel can be followed on <UiLink to="https://track.example.com/parcel/41">the carrier's site</UiLink>. Questions go to <UiLink to="mailto:orders@example.com">orders@example.com</UiLink> or <UiLink to="tel:+15550100">+1 555 0100</UiLink>. </p> </UiCard></template>
Also called hyperlink, anchor, text link.
Usage
<UiLink :to="to">…</UiLink> With GraniResolver in the Vite config, a template needs no import: set it up once.
API
| Name · type | Default | Description |
|---|---|---|
| to*string | A route or a URL; an absolute address is external, mailto: and tel: are not. javascript: and data: are refused: the text shows with no link. | |
| tonebrand | neutral | info= "brand" | "brand" | brand is the link color; info the signal blue, a link to look at; neutral a quiet link in a caption. |
| target_blank | _self | _blank or _self overrides the default: a new tab for an external address only. | |
| relstring | Replaces the default noreferrer, e.g. nofollow, sponsored, ugc; noopener stays on a new tab. |
Anything else lands on the root element: native attributes, aria-*, data-testid.