Link

A navigational element for routing between pages or external resources with support for icons, external indicators, and various visual styles.

Import#

import { Link } from "asheeui";

Usage#

import { Link } from "asheeui";

export default function Basic() {
	return <Link href="/about">About Us</Link>;
}

Examples#

Color#

Variant#

Size#

Underline behavior#

External link#

With icons#

Disabled#

Combined example#

With custom link component#

Props#

* Falls back through Global Configuration if not set. See below.

Global Configuration#

Link reads defaults from four places, in this order of precedence:

1. Instance prop: set directly on <Link />
2. Component config: components.link in your ashee.config
3. Theme default: defaultColor in your ashee.config
4. Built-in fallback: component's internal default values

Component config#

// ashee.config.ts
import type { ExternalConfig } from "asheeui";

export const config: ExternalConfig = {
  components: {
    link: {
      variant: "default",
      color: "primary",
      size: "md",
      underline: "hover",
      isExternal: false,
    },
  },
};

Built-in fallbacks#

{
  size: "md",
  variant: "default",
  color: "primary",
  underline: "hover",
  isExternal: false,
}

Accessibility#

• Renders a native <a> element (or custom link component) with proper semantics
• External links automatically include rel="noopener noreferrer" for security
• Uses aria-disabled for disabled state
• Disabled links remove href attribute to prevent navigation
• Implements focus-visible rings for keyboard navigation

Notes#

• External Links: When isExternal is true, the link automatically opens in a new tab with proper security attributes (target="_blank" and rel="noopener noreferrer").
• External Indicator: An external link icon is automatically added when isExternal is true (unless overridden by endIcon).
• Disabled State: Disabled links have reduced opacity, no hover effects, and cannot be clicked.
• Underline Behavior: underline="hover" shows underline only on hover, underline="always" always shows underline, and underline="never" never shows underline.
• Variant Muted: The muted variant uses a muted foreground color that brightens on hover, useful for less prominent links.
• Variant Subtle: The subtle variant uses reduced opacity that increases on hover.
• Custom Link Component: You can replace the default <a> tag with any routing‑library link component (e.g., Next.js Link, TanStack Router Link) using the linkComponent prop. Additional props can be passed via linkProps. All styles, interactions, and accessibility features are preserved.