Link [react-aria-components]

Buttons 11

About

A link allows a user to navigate to another page or resource within a web page or application. Links can be created in HTML with the <a> element with an href attribute. However, if the link does not have an href, and is handled client side with JavaScript instead, it will not be exposed to assistive technology properly. Link helps achieve accessible links with either native HTML elements or custom element types.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Link [react-aria-components] to your project and fits it to your theme.

Code

How Link [react-aria-components] is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Link } from "@/components/ui/link"

function LinkVariants() {
  return (
    <div className="flex flex-col gap-4">
      <div className="flex flex-wrap justify-center gap-4">
        <Link href="/docs/components/link">Link</Link>
        <Link variant="destructive" href="/docs/components/link">
          Destructive
        </Link>
        <Link variant="ghost" href="/docs/components/link">
          Ghost
        </Link>
        <Link variant="link" href="/docs/components/link">
          Link
        </Link>
        <Link variant="outline" href="/docs/components/link">
          Outline
        </Link>
        <Link variant="secondary" href="/docs/components/link">
          Secondary
        </Link>
      </div>
      Disabled
      <div className="flex flex-wrap justify-center gap-4">
        <Link isDisabled href="/docs/components/link">
          Link
        </Link>
        <Link isDisabled variant="destructive" href="/docs/components/link">
          Destructive
        </Link>
        <Link isDisabled variant="ghost" href="/docs/components/link">
          Ghost
        </Link>
        <Link isDisabled variant="link" href="/docs/components/link">
          Link
        </Link>
        <Link isDisabled variant="outline" href="/docs/components/link">
          Outline
        </Link>
        <Link isDisabled variant="secondary" href="/docs/components/link">
          Secondary
        </Link>
      </div>
    </div>
  )
}
export { LinkVariants }