Fusion UI

Overview

A Link navigates to another page or resource. It renders a Next.js link and takes a MenuItem for its target.

"use client";

import React from "react";
import {Link} from "@brynlabs/fusion-ui";

export const LinkExample = () => (
  <Link
    linkStyle={"primary"}
    link={{
      href: "#",
      title: "Primary Link",
    }}>
    Primary Link
  </Link>
);

Styles

primary, secondary, tertiary and currentColor decrease the emphasis.

Primary Link Secondary Link Tertiary Link

CurrentColor Link

"use client";

import React from "react";
import {Link} from "@brynlabs/fusion-ui";

export const LinkStylesExample = () => (
  <div style={{display: "grid", gap: "1rem", placeItems: "start"}}>
    <Link
      linkStyle={"primary"}
      link={{
        href: "#",
        title: "Primary Link",
      }}>
      Primary Link
    </Link>
    <Link
      linkStyle={"secondary"}
      link={{
        href: "#",
        title: "Secondary Link",
      }}>
      Secondary Link
    </Link>
    <Link
      linkStyle={"tertiary"}
      link={{
        href: "#",
        title: "Tertiary Link",
      }}>
      Tertiary Link
    </Link>
    <div style={{color: "var(--color--green-500)"}}>
      <Link
        linkStyle={"currentColor"}
        link={{
          href: "#",
          title: "CurrentColor Link",
        }}>
        CurrentColor Link
      </Link>
    </div>
  </div>
);

Variants

This is a Primary Link

This is a Secondary Link

This is a Tertiary Link

This is a CurrentColor Link

"use client";

import React from "react";
import {Link} from "@brynlabs/fusion-ui";

export const LinkVariantsExample = () => (
  <div style={{display: "grid", gap: "1rem", placeItems: "start"}}>
    <p className="body-font">
      This is a{" "}
      <Link
        linkStyle={"primary"}
        link={{
          href: "#",
          title: "Primary Link",
        }}>
        Primary Link
      </Link>
    </p>
    <p className="body-font strong-font">
      This is a{" "}
      <Link
        linkStyle={"primary"}
        link={{
          href: "#",
          title: "Primary Link",
        }}>
        Primary Link
      </Link>
    </p>
    <p className="helper-text-font">
      This is a{" "}
      <Link
        linkStyle={"primary"}
        link={{
          href: "#",
          title: "Primary Link",
        }}>
        Primary Link
      </Link>
    </p>

    <p className="body-font">
      This is a{" "}
      <Link
        linkStyle={"secondary"}
        link={{
          href: "#",
          title: "Secondary Link",
        }}>
        Secondary Link
      </Link>
    </p>
    <p className="helper-text-font">
      This is a{" "}
      <Link
        linkStyle={"secondary"}
        link={{
          href: "#",
          title: "Secondary Link",
        }}>
        Secondary Link
      </Link>
    </p>

    <p className="body-font">
      This is a{" "}
      <Link
        linkStyle={"tertiary"}
        link={{
          href: "#",
          title: "Tertiary Link",
        }}>
        Tertiary Link
      </Link>
    </p>
    <p className="body-font" style={{color: "#c32626"}}>
      This is a{" "}
      <Link
        linkStyle={"tertiary"}
        link={{
          href: "#",
          title: "Tertiary Link",
        }}>
        Tertiary Link
      </Link>
    </p>
    <p className="helper-text-font">
      This is a{" "}
      <Link
        linkStyle={"tertiary"}
        link={{
          href: "#",
          title: "Tertiary Link",
        }}>
        Tertiary Link
      </Link>
    </p>

    <p className="body-font">
      This is a{" "}
      <Link
        linkStyle={"currentColor"}
        link={{
          href: "#",
          title: "CurrentColor Link",
        }}>
        CurrentColor Link
      </Link>
    </p>
    <p className="body-font" style={{color: "#c32626"}}>
      This is a{" "}
      <Link
        linkStyle={"currentColor"}
        link={{
          href: "#",
          title: "CurrentColor Link",
        }}>
        CurrentColor Link
      </Link>
    </p>
    <p className="helper-text-font">
      This is a{" "}
      <Link
        linkStyle={"currentColor"}
        link={{
          href: "#",
          title: "CurrentColor Link",
        }}>
        CurrentColor Link
      </Link>
    </p>
  </div>
);

Visited state

useVisitedState={false} or the no-visited class removes the visited color, e.g. for navigation items or calls to action that should not change color.

no-visited visited

"use client";

import React from "react";
import {Link} from "@brynlabs/fusion-ui";

export const LinkVisitedExample = () => (
  <div style={{display: "grid", marginTop: "1rem", gap: "1rem", placeItems: "start"}}>
    <Link
      linkStyle={"primary"}
      link={{
        href: "/components/link",
        title: "no-visited Link",
      }}
      useVisitedState={false}>
      no-visited
    </Link>
    <Link
      linkStyle={"primary"}
      link={{
        href: "/components/link",
        title: "Visited Link",
      }}
      useVisitedState={true}>
      visited
    </Link>
  </div>
);