Link

Link component is used to render accessible anchor elements with various styles, colors, and underline behaviors. It supports external links with automatic security attributes.

import { Link } from "@ninna-ui/primitives"

pnpm add @ninna-ui/primitives

Requires @ninna-ui/core (auto-installed) + CSS setup.

View source

Usage

Import and use the Link component to render accessible anchor elements.

import { Link } from "@ninna-ui/primitives";

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

Basic

Default link rendering.

Default Link

Sizes

Use the size prop to control text size, matching the Text component's size scale.

Extra Small Small Medium Large Extra Large

Colors

Links with different color variants.

Neutral Primary Secondary Accent Info Success Warning Danger

Underline

Control the underline behavior with the underline prop.

Always underlined

Always Underline

Underline on hover

Hover Underline

No underline

No Underline

External Links

External links automatically add security attributes and can show an icon.

External link with icon

GitHub

External link without icon

GitHub (no icon)

Auto-detected external (target="_blank")

Example.com

Inline Links

Links can be used inline within text content.

This is a paragraph with an inline link that flows naturally with the text.

You can read more about our privacy policy and terms of service on our website.

For questions, contact us at support@example.com.

Use Cases

Real-world examples of Link component usage.

Navigation

Footer Links

Company

About Careers Press

Resources

Documentation API Reference Guides

Social Links

Twitter GitHub LinkedIn

Breadcrumb

Call to Action

Ready to get started? Sign up now or learn more.

API Reference

Complete list of props for the Link component.

Props

Prop	Type	Default	Description
`href`	`string`	-	The URL the link points to
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	-	Text size — matches Text component sizes. Inherits from parent when not set.
`color`	`'neutral' \| 'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'danger'`	`'neutral'`	Color variant of the link
`underline`	`'always' \| 'hover' \| 'none'`	`'hover'`	Underline behavior
`external`	`boolean`	`false`	Whether the link opens in a new tab (adds target="_blank" and rel="noopener noreferrer")
`showExternalIcon`	`boolean`	`true`	Whether to show an external link icon for external links
`externalIcon`	`ReactNode`	-	Custom external icon to display
`className`	`string`	-	Additional CSS classes

Accessibility

Semantic HTML: Uses native anchor element for proper accessibility
Focus visible: Clear focus ring for keyboard navigation
External links: Automatically adds rel="noopener noreferrer" for security
Color contrast: All color variants meet WCAG AA contrast requirements
Descriptive text: Always use descriptive link text, avoid "click here"
External indicator: Visual icon indicates links that open in new tabs