BackButton

Discoverable bordered back-navigation pill with an adequate touch target.

import { BackButton }from "@/components/ui"

Specification

A discoverable bordered pill that links back to a previous page with an adequate touch target.

Props (3)

Every prop this component accepts, its type, default, and how to use it.

Prop	Type	Default	Description
href*	`string`	—	Destination the back link navigates to.
label*	`string`	—	Visible text describing where the link goes.
className	`string`	—	Additional CSS classes merged onto the link.

Basic

Back to users

Full source

The complete component, read from src/components/ui/back-button.tsx.

back-button.tsx

"use client";

import Link from "next/link";
import { ArrowLeft } from "lucide-react";
import { cn } from "@/lib/utils";

interface BackButtonProps {

  href: string;

  label: string;

  className?: string;
}

export function BackButton({ href, label, className }: BackButtonProps) {
  return (
    <Link
      href={href}
      className={cn(
        "group inline-flex min-h-9 items-center gap-2 rounded-lg border border-border bg-bg px-3 text-sm font-medium text-text-secondary no-underline shadow-sm transition-colors",
        "hover:border-accent hover:bg-accent-light hover:text-accent",
        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2",
        className
      )}
    >
      <ArrowLeft size={16} className="transition-transform group-hover:-translate-x-0.5" aria-hidden />
      <span>{label}</span>
    </Link>
  );
}

Dependencies

To use BackButton you also need the following. Copy these into your project alongside it.

Recommended folder structure

project structure

src/components/ui/
  └─ back-button.tsx
src/lib/
  └─ utils.ts

Dependency files

These supporting files aren’t components — copy each one into the matching path above.

src/lib/utils.ts

utils.ts

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

/**
 * Merge class names with clsx semantics + Tailwind conflict resolution.
 * Prefer this in all components.
 */
export function cn(...inputs: ClassValue[]): string {
  return twMerge(clsx(inputs));
}

/**
 * Concatenate class names, filtering out falsy values.
 * @deprecated Prefer {@link cn} — it also resolves Tailwind class conflicts.
 */
export function cx(...args: (string | false | null | undefined)[]): string {
  return args.filter(Boolean).join(" ");
}

/**
 * Focus ring style helper.
 * @deprecated Focus rings are now handled globally via the
 * `:focus-visible` rule in `globals.css` and the `focus-visible:*`
 * utilities. This remains only for backwards compatibility.
 */
export function ring(color: string = "var(--color-accent)") {
  return { outlineColor: color };
}