Link

Name: Nayan UI
Author: Nayan UI

A Link component is a UI element that allows users to navigate from one page or section to another within a web application or website. Typically styled as underlined text or buttons, links provide a clear indication of interactivity. They can point to internal or external resources and often include features like hover effects or icons to enhance user experience and accessibility.

Demo

HeroUI Documentation

Usage

import { NLink } from '@nayan-ui/react';

const handleClick = () => alert('Span clicked!');
const doSomething = (e) => alert('Custom action!');

const Link = () => {
  return (
    <>
      <div className="mb-4">
        <NLink href="https://example.com">External Link</NLink>
      </div>

      <div className="mb-4">
        <NLink href="https://example.com" target="_self" rel="nofollow" className="text-blue-700 underline">
          Custom Anchor
        </NLink>
      </div>

      <div className="mb-4">
        <NLink onClick={handleClick}>Clickable Span</NLink>
      </div>

      <div className="mb-4">
        <NLink className="font-bold text-green-700" onClick={handleClick}>
          Styled Span
        </NLink>
      </div>

      <div className="mb-4">
        <NLink href="/about" className="underline text-purple-700">About (Internal Link)</NLink>
        <br />
        <NLink className="cursor-pointer text-orange-700" onClick={doSomething}>
          Do Something
        </NLink>
      </div>

      <div className="mb-4">
        <NLink onClick={handleClick}>Focus me and press Enter or Space</NLink>
      </div>
    </>
  );
};

export default Link;

Attributes

Name	Type	Default	Details
href	string	Optional	URL for anchor links.
children	React.ReactNode	Required	Link content.
className	string	' '	You can customise by passing tailwind classes.

Link

Demo

Usage

Attributes

Tags