Link

Links allow users to navigate to a different location. They can be presented inside a paragraph or as standalone text.

import {QLink} from "@qui/react"

Examples

Showcase

Primary Link Secondary Link

import {ReactNode} from "react"

import {ChevronRight} from "lucide-react"

import {QLink} from "@qui/react"

export default function Showcase(): ReactNode {
  return (
    <div className="grid justify-center gap-4">
      <QLink
        endIcon={ChevronRight}
        href="https://google.com"
        target="_blank"
        variant="primary"
      >
        Primary Link
      </QLink>
      <QLink
        endIcon={ChevronRight}
        href="https://bing.com"
        target="_blank"
        variant="secondary"
      >
        Secondary Link
      </QLink>
    </div>
  )
}

Disabled

The disabled property applies the disabled style to the link and prevents pointer and keyboard events.

Primary Link Secondary Link

import {ReactNode} from "react"

import {ChevronRight} from "lucide-react"

import {QLink} from "@qui/react"

export default function Disabled(): ReactNode {
  return (
    <div className="grid justify-center gap-4">
      <QLink disabled endIcon={ChevronRight} variant="primary">
        Primary Link
      </QLink>
      <QLink disabled endIcon={ChevronRight} variant="secondary">
        Secondary Link
      </QLink>
    </div>
  )
}

API

Props

Name & Description	Option(s)	Default
as The component used for the root node. It can be a React component or element.	\| ElementType \| ComponentType	'a'
children React children prop. The content of the component.	ReactNode
className The className property of the Element interface gets and sets the value of the class attribute of the specified element.	string
contentClass Class applied to the element that wraps the component's children.	string
disabled If true, the component is disabled.	boolean	false
endIcon lucide-react icon, positioned after the label.	\| LucideIcon \| ReactNode
startIcon Icon, positioned before the label.	\| LucideIcon \| ReactNode
style The style global attribute contains CSS styling declarations to be applied to the element.	CSSProperties
variant The style variant of the link.	\| 'primary' \| 'secondary'	'primary'