Link
Pura Link is a building-block anchor that forwards href and target onto an inner native link while handling presentation through attributes. It supports four visual variants (including a button-style link) and a set of theme colors, and can mark a link as external to add safe rel attributes, a _blank target, and a trailing arrow glyph.
Preview
<script type="module" src="/pura/lib/link.js"></script>
<!-- Default: underline appears on hover -->
<pura-link href="/docs">Documentation</pura-link>
<!-- Always underlined, accent color -->
<pura-link href="/blog" variant="underline" color="accent">Read the blog</pura-link>
<!-- Subtle link with no underline -->
<pura-link href="/help" variant="subtle" color="muted">Need help?</pura-link>
<!-- External link: adds rel, target _blank, and a trailing arrow -->
<pura-link href="https://example.com" external>Open external resource</pura-link>
<!-- Button-style link -->
<pura-link href="/signup" variant="button">Get started</pura-link>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
href | string | — | Destination URL, forwarded to the inner <a> element. |
target | string | — | Link target such as _blank, forwarded to the inner <a>. When external is set and no target is given, _blank is used as a fallback. |
variant | "underline-on-hover" | "underline" | "subtle" | "button" | underline-on-hover | Visual treatment of the link. underline-on-hover shows the underline only on hover, underline keeps it visible until hover, subtle removes the underline, and button renders a bordered button-like control. |
color | "fg" | "muted" | "primary" | "accent" | primary | Foreground color drawn from the theme tokens. |
external | boolean | false | Marks the link as external. Adds rel="noopener noreferrer", falls back to target=_blank, and appends a trailing arrow glyph. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/link.js"></script>import "./pura/lib/link.js";