Link

Hyperlinks create a web of information, allowing readers to explore related topics in more detail.

A Link

Installation

Copy-Paste the component code in a .tsx file.

import React from "react"
import {
    link,
    type LinkProps as LinkVariants,
    type TextAlignProp,
    type TextWeightProp
} from "@tailus/themer"

type LinkSize = LinkVariants["size"]
type LinkVariant = LinkVariants["variant"]
type LinkIntent = LinkVariants["intent"]
type LinkVisited = LinkVariants["visited"]
type LinkSizeProp = LinkSize |  {
    initial?: LinkSize,
    sm?: LinkSize,
    md?: LinkSize,
    lg?: LinkSize,
    xl?: LinkSize,
    xxl?: LinkSize,
}

type LinkVariantProp = LinkVariant | {
    initial?: LinkVariant,
    sm?: LinkVariant,
    md?: LinkVariant,
    lg?: LinkVariant,
    xl?: LinkVariant,
    xxl?: LinkVariant,
}

type LinkIntentProp = LinkIntent | {
    initial?: LinkIntent,
    sm?: LinkIntent,
    md?: LinkIntent,
    lg?: LinkIntent,
    xl?: LinkIntent,
    xxl?: LinkIntent,
}

type LinkVisitedProp = LinkVisited | {
    initial?: LinkVisited,
    sm?: LinkVisited,
    md?: LinkVisited,
    lg?: LinkVisited,
    xl?: LinkVisited,
    xxl?: LinkVisited,
}

export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>  {
    children: React.ReactNode,
    className?: string,
    size?: LinkSizeProp;
    align?: TextAlignProp;
    weight?: TextWeightProp;
    variant?: LinkVariantProp;
    intent?: LinkIntentProp;
    visited? : LinkVisitedProp
}

export const Link: React.FC<LinkProps> = ({
    size,
    weight,
    align,
    variant,
    intent,
    visited,
    children,
    className,
    ...props
}) => {
    return (
        <a className={link({
            size,
            variant,
            visited,
            intent,
            weight,
            align,
            className
        })} {...props}>
            {children}
        </a>
    )
}

Usage

Import the <Link/> and start building.

import { Link } from "@tailus-ui/typography";
const MyComponent = () => (
    <Link href="#">A Link</Link>
)

Reference

The Link component has the following props

Prop
Type
Default
size ~
enum
base
variant ~
enum
base
intent ~
enum
gray
align ~
enum
left
visited ~
boolean
weight ~
enum

Examples

Size

XsSmBaseLgXl
 
const MyCodes = () => (
    <div className="flex flex-wrap gap-3">
        <Link href="#" size="xs">Xs</Link>
        <Link href="#" size="sm">Sm</Link>
        <Link href="#" size="base">Base</Link>
        <Link href="#" size="lg">Lg</Link>
        <Link href="#" size="xl">Xl</Link>
    </div>
)

Variant

plainunderlinedghostanimated
 
const MyCodes = () => (
    <div className="flex flex-wrap gap-3">
        <Link href="#" variant="plain">plain</Link>
        <Link href="#" variant="underlined">underlined</Link>
        <Link href="#" variant="ghost">ghost</Link>
        <Link href="#" variant="animated">animated</Link>
    </div>
)

Intents

primarysecondaryaccentsuccessdangerinfowarninggrayneutral
 
const MyCodes = () => (
    <div className="flex flex-wrap gap-3">
        <Link href="#" intent="primary">primary</Link>
        <Link href="#" intent="secondary">secondary</Link>
        <Link href="#" intent="accent">accent</Link>
        <Link href="#" intent="success">success</Link>
        <Link href="#" intent="danger">danger</Link>
        <Link href="#" intent="info">info</Link>
        <Link href="#" intent="warning">warning</Link>
        <Link href="#" intent="gray">gray</Link>
        <Link href="#" intent="neutral">neutral</Link>
    </div>
)