NavigationBack button

Back button

A leading chevron + label that returns the user to the previous section. Used at the top of every case study sub-section.

1 line of codeScrolls to topNative browser back if href is omitted

Demo

Default

Back to work

Anatomy

0.875 rem, weight 500, --muted-foreground at rest, --foreground on hover
Chevron is decorative, aria-hidden
Default label is "Back" if no label is provided

Implementation

back-button.tsx

import Link from "next/link"
import { ChevronLeft } from "lucide-react"
import SiteIcon from "@/components/site-icon"

interface BackButtonProps {
  href: string
  label?: string
}

export function BackButton({ href, label = "Back" }: BackButtonProps) {
  return (
    <Link href={href} className="ds-back">
      <SiteIcon icon={ChevronLeft} size="xs" />
      {label}
    </Link>
  )
}

Props

Prop	Type	Default	Description
`href`	`string`	`None`	Required: the destination
`label`	`string`	`"Back"`	The link text
`scroll`	`boolean`	`true`	Scroll to top after navigation