Link

Displays a styled anchor for inline text links with multiple variants and an external-link icon.

Current color link

Plain inline link

import ilha from "ilha";
import { Link } from "areia";

export default ilha.render(() => (
  <div class="flex flex-wrap items-center gap-4 text-areia-default">
    <Link href="#">Default inline link</Link>
    <Link href="#" variant="current">
      Current color link
    </Link>
    <Link href="#" variant="plain">
      Plain inline link
    </Link>
  </div>
));

Import

import { Link } from "areia";

Usage

The default Link renders an underlined anchor with primary color styling.

Read our documentation for more details.

import ilha from "ilha";
import { Link } from "areia";

export default ilha.render(() => (
  <p class="text-areia-default">
    Read our <Link href="/docs">documentation</Link> for more
    details.
  </p>
));

Examples

Inline in Paragraph

Links flow naturally within paragraph text with proper underline offset.

This is a paragraph with an inline link that flows naturally with the surrounding text. Links maintain proper underline offset for readability.

import ilha from "ilha";
import { Link } from "areia";

export default ilha.render(() => (
  <p class="max-w-prose text-areia-default">
    This is a paragraph with an
    <Link href="#">inline link</Link> that flows naturally with
    the surrounding text. Links maintain proper underline offset
    for readability.
  </p>
));

External Link with Icon

Use Link.ExternalIcon to visually indicate links that navigate away from your site. Set external: true to open the link in a new tab with safe rel defaults.

Visit Kumo UI

import ilha from "ilha";
import { Link } from "areia";

export default ilha.render(() => (
  <Link href="https://kumo-ui.com" external>
    Visit Kumo UI
    <Link.ExternalIcon />
  </Link>
));

Current Variant

The current variant inherits color from its parent. Use it for links inside colored contexts like alerts, banners, or error messages.

This error message contains a

link

that inherits the red color from its parent.

import ilha from "ilha";
import { Link } from "areia";

export default ilha.render(() => (
  <p class="text-areia-destructive-soft-foreground">
    This error message contains a
    <Link href="#" variant="current">
      link
    </Link>
    that inherits the red color from its parent.
  </p>
));

Plain Variant

Use plain when an underline would be distracting, such as navigation, menus, and footers.

import ilha from "ilha";
import { Link } from "areia";

export default ilha.render(() => (
  <nav class="flex flex-wrap gap-4">
    <Link href="#" variant="plain">
      Overview
    </Link>
    <Link href="#" variant="plain">
      Components
    </Link>
    <Link href="#" variant="plain">
      Guides
    </Link>
  </nav>
));

Custom Classes

Pass class or className to merge additional classes with the generated variant classes.

Custom styled link

import ilha from "ilha";
import { Link } from "areia";

export default ilha.render(() => (
  <Link href="#" class="font-medium decoration-dashed">
    Custom styled link
  </Link>
));

API Reference

Link

Extends native anchor attributes.

Prop	Type	Default	Description
`variant`	`"inline" \| "current" \| "plain"`	`"inline"`	Visual style variant.
`href`	`string`	-	Link destination URL.
`children`	`unknown`	-	Content rendered inside the link.
`label`	`unknown`	-	Content rendered inside the link when `children` is not provided.
`external`	`boolean`	`false`	Sets `target="_blank"` and `rel="noopener noreferrer"`.
`class`	`string`	-	Additional CSS classes merged with the generated classes.
`className`	`string`	-	Alias for `class`.

Variants

Variant	Description	Use Case
`inline`	Primary color with underline.	Default for inline text links.
`current`	Inherits parent text color with underline.	Links within colored contexts.
`plain`	Primary color without underline.	Navigation links, menus, and footers.

Link.ExternalIcon

SVG icon component to indicate external links. It accepts arbitrary SVG attributes plus class and className.

External Site

import ilha from "ilha";
import { Link } from "areia";

export default ilha.render(() => (
  <Link href="https://example.com" external>
    External Site
    <Link.ExternalIcon class="size-4" />
  </Link>
));

Design Guidelines

When to Use Each Variant

inline: Default choice for links within body text.
current: Links inside alerts, banners, errors, or other colored containers.
plain: Navigation menus, footers, or places where underlines are visually distracting.

External Link Indicators

Use Link.ExternalIcon for links that open in new tabs or leave the current site.
Use external: true to set target="_blank" and rel="noopener noreferrer".
The icon is decorative and has aria-hidden="true"; make the link text itself descriptive.

Accessibility

Links are keyboard focusable by default.
Use descriptive link text and avoid vague labels like “click here”.
Ensure each link has an href when it navigates somewhere.
Ensure sufficient color contrast for custom classes and colored parent contexts.