General · astro-ui · Link
Link
Semantic anchor with external/rel smarts, icons, colors, and a disabled state.
Link renders a styled <a> with smart defaults: external or target=“_blank” links automatically get rel=“noopener noreferrer” (opt out with noRel or a custom rel). Disabled links drop their href and mute out. Icons are currentColor CSS masks — no JS, no icon dependency. Navigation hints like prefetch, replace, and viewTransition only render data-* attributes for your router or islands to adopt.
Features
- Auto rel="noopener noreferrer" for external/_blank
- 7 colors, 3 sizes, optional underline
- arrow / chevron / external / download icons
- Disabled & loading states
- data-* navigation hooks — zero JS
Usage
---
import { Link } from "astro-ui";
---
<Link href="https://astro.build" external icon="external">Astro</Link>Demos
Basic
<Link href="#">Default link</Link>
<Link href="#" underline={false}>No underline</Link>External & icons
<Link href="https://astro.build" external icon="external">Astro docs</Link>
<Link href="#" icon="arrow">Next step</Link>Colors & sizes
<Link href="#" color="muted">Muted</Link>
<Link href="#" color="destructive">Delete account</Link>
<Link href="#" size="lg">Large</Link>Disabled / loading
<Link disabled>Unavailable</Link>
<Link loading loadingText="Opening…">Docs</Link>API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
href | string | — | Link URL. Omitted for non-interactive links. |
external | boolean | false | Marks the link external; defaults rel to "noopener noreferrer". |
target | string | — | Browsing-context target (e.g. "_blank"). Implies the external rel default. |
rel / noRel | string / boolean | — | Custom rel, or omit rel entirely. |
icon | "arrow" | "chevron" | "external" | "download" | — | CurrentColor icon before the text. |
iconOnly | boolean | false | Icon-only mode (provide ariaLabel). |
size | "sm" | "md" | "lg" | "md" | Text scale. |
underline | boolean | true | Text underline. |
color | "primary" | "secondary" | "muted" | "destructive" | "success" | "warning" | "inherit" | "primary" | Text color. |
block | boolean | false | Fill the parent's inline width. |
disabled | boolean | false | Non-interactive: drops href and mutes. |
loading | boolean | false | Pending state; swaps content for loadingText. |
loadingText | string | — | Content while loading (falls back to the slot). |
ariaCurrent | "page" | "step" | "location" | "date" | "true" | "false" | — | aria-current marker. |
download / hreflang / ping / referrerPolicy | — | — | Forwarded verbatim to the anchor. |
prefetch / prefetchOn / noPrefetch | boolean / string / boolean | — | Render data-* hints for your router; no JS shipped. |
replace / viewTransition | boolean | false | More data-* navigation hints (replaceState, View Transitions). |
class | string | — | Merged via cn(); Tailwind classes welcome. |
id | string | — | Element id. |
ariaLabel | string | — | Accessible name. |
Slots
| Slot | Description |
|---|---|
default | Link text or custom content. |
Accessibility
Implemented accessibility features — semantics, ARIA wiring, and keyboard behavior that ship with the component.
- Native anchor semantics; external links announce their target via
aria-label aria-currentfor the active page;aria-disabledfor disabled links:focus-visiblering
FAQ
Do prefetch, replace, or viewTransition do anything by themselves?
No — deliberately. They render data-* attributes so a router, an Astro island, or a small script can adopt them. The component itself ships zero JavaScript.
Changelog
Version history mentioning Link.
- General (7): Button, ButtonGroup, Command, Carousel, Clipboard, Kbd, Link.