Componentnavigation0.45 KB gzipZero dependencies

BackLink

Chevron button with label that slides on hover, with focus ring

Preview

Live Preview

Back

Installation

Tokens guide →

Add to your project via CLI (zero dependencies, code you own):

npx bigbullui add back-link

Or install the full npm package:

npm install bigbullui

Usage

Open in StackBlitz

import { BackLink } from "@/components/ui/back-link"

<BackLink href="#" label="Back" />

Usage guidance

Use BackLink when a ticket stub surface needs Chevron button with label that slides on hover, with focus ring Keep props minimal and prefer composition with sibling stubs.

Avoid BackLink for long form flows or dense data grids where a dedicated layout block fits better.

Source code

back-link.tsx

Zero dependencies (only React + utils). Copy and paste directly into your project:

"use client";

import * as React from "react";
import { cn } from "./lib/utils";

export interface BackLinkProps {
  href: string;
  label?: string;
}

export function BackLink({
  href,
  label = "Back",
}: BackLinkProps) {
  return (
    <a
      href={href}
      className={cn(
        "flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors",
        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
        "group"
      )}
    >
      <svg
        className={cn(
          "h-4 w-4",
          "group-hover:translate-x-1 transition-transform",
          "group-focus-visible:translate-x-1"
        )}
        viewBox="0 0 24 24"
        fill="currentColor"
        focusable="false"
      >
        <path d="M15 18l-6-6 6-6" />
      </svg>
      <span className="text-[10px] uppercase tracking-[0.15em]">{label}</span>
    </a>
  );
}

Props

Prop	Type	Description
href	string
label?	string