Link

Import

import { Link } from '@blakeui/react';

Usage

import {Link} from "@blakeui/react";

export function LinkBasic() {
  return (
    <Link href="#">
      Call to action
      <Link.Icon />
    </Link>
  );
}

Anatomy

Import the Link component and access all parts using dot notation.

import { Link } from '@blakeui/react';

export default () => (
  <Link href="#">
    Call to action
    <Link.Icon />
  </Link>
);

Custom Icon

import {Link} from "@blakeui/react";
import {ArrowUpRightFromSquare, Link as LinkIcon} from "@gravity-ui/icons";

export function LinkCustomIcon() {
  return (

Icon Placement

import {Link} from "@blakeui/react";

export function LinkIconPlacement() {
  return (
    <div className="flex flex-col gap-3">

Text Decoration with Tailwind CSS

Link is underlined on hover by default. Use Tailwind CSS text-decoration utilities to make the underline always visible, remove it entirely, or customize its color, style, thickness, and offset.

import {Link} from "@blakeui/react";

export function LinkUnderlineAndOffset() {
  return (
    <div className="flex flex-col gap-6">

Text Decoration Line:

• underline - Always visible underline
• no-underline - Remove underline
• default Link styles - Underline appears on hover

Text Decoration Color:

• decoration-primary, decoration-secondary, etc. - Set underline color using theme colors
• decoration-muted/50 - Use opacity modifiers for semi-transparent underlines

Text Decoration Style:

• decoration-solid - Solid line (default)
• decoration-double - Double line
• decoration-dotted - Dotted line
• decoration-dashed - Dashed line
• decoration-wavy - Wavy line

Text Decoration Thickness:

• decoration-1, decoration-2, decoration-4, etc. - Control underline thickness

Underline Offset:

• underline-offset-1, underline-offset-2, underline-offset-4, etc. - Adjust spacing between text and underline

For more details, see the Tailwind CSS documentation:

• text-decoration-line
• text-decoration-color
• text-decoration-style
• text-decoration-thickness
• text-underline-offset

Available BEM classes:

• Base: link
• Icon: link__icon

Custom Render Function

"use client";

import {Link} from "@blakeui/react";

export function CustomRenderFunction() {

Styling

Passing Tailwind CSS classes

import { Link } from '@blakeui/react';

function CustomLink() {
  return (
    <Link
      href="#"
      className="text-lg font-bold text-accent hover:text-accent/80"
    >
      Custom styled link
    </Link>
  );
}

Customizing the component classes

To customize the Link component classes, you can use the @layer components directive.
Learn more.

A worked example is in Styling.

blakeUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The Link component uses these CSS classes (View source styles):

Base Classes

• .link - Base link styles
• .link__icon - Link icon styles

Interactive States

The component supports both CSS pseudo-classes and data attributes for flexibility:

• Focus: :focus-visible or [data-focus-visible="true"]
• Hover: :hover or [data-hovered="true"]
• Pressed: :active or [data-pressed="true"]
• Disabled: :disabled or [aria-disabled="true"]

API Reference

Link Props

Link.Icon Props

Using with Routing Libraries

Use variant functions to style framework-specific links like Next.js:

import { Link } from '@blakeui/react';
import { linkVariants } from '@blakeui/styles';
import NextLink from 'next/link';

export default function Demo() {
  const slots = linkVariants();

  return (
    <NextLink className={slots.base()} href="/about">
      About Page
      <Link.Icon className={slots.icon()} />
    </NextLink>
  );
}

Direct Class Application

Since blakeUI uses BEM classes, you can apply Link styles directly to any link element:

import NextLink from 'next/link';

// Apply classes directly with Tailwind utilities
export default function Demo() {
  return (
    <NextLink href="/about" className="link underline-offset-2">
      About Page
    </NextLink>
  );
}

// Or with a native anchor
export default function NativeLink() {
  return (
    <a href="/about" className="link underline decoration-primary underline-offset-4">
      About Page
      <Link.Icon className="link__icon" />
    </a>
  );
}