Typography
Link
A link component
Overview
The Link component renders styled, accessible links for navigation and actions. It supports internal and external URLs, optional icons, and theme-aligned styling.
Key Business & UX Benefits
- Keeps link styling consistent and on-brand across the app.
- Makes external links and download targets clear for users.
- Stays accessible with focus and keyboard support.
- Works with icons for calls-to-action and navigation.
Pro-Tip from Larry: Use the external-link variant so users know when they leave your site.
Usage
Link
Feature List
- Internal and external link variants with consistent styling
- Optional leading or trailing icons
- Accessible focus and keyboard navigation
- Theme-aligned colors and hover states
API Reference
| Prop | Default | Type |
|---|---|---|
href | string | |
target | string | |
color | auto | "primary" | "grey" | "white" | "black" | "auto" | "always-white" | "always-black" |
icon | string | |
iconPosition | right | "left" | "right" |
iconSize | s | "s" | "m" | "sm" | "l" |
| Slot | Type |
|---|---|
default | {} |