Buttons

LogoButton

The branded primary button. It takes either a to prop or an onClick and refuses both, so a button that looks live and does nothing is a type error.

src/lib/docs/showcase/logo-button.tsx

import { LogoButton } from '@/components/Button/LogoButton/LogoButton'

export function LogoButtonDemo() {
  return (
    <div className="flex flex-col items-start gap-4">
      <LogoButton label="Get the boilerplate" to="/" hash="pricing" />
      <LogoButton label="Read about it" to="/about" block />
    </div>
  )
}

The button that begins a purchase. It navigates rather than paying: a signed-out reader goes to sign-up carrying the slug, and everyone else goes to the step that collects the GitHub username. This one is live.

src/lib/docs/showcase/pricing-cta-button.tsx

import { PricingCTAButton } from '@/components/Button/PricingCTAButton/PricingCTAButton'

export function PricingCtaButtonDemo() {
  return (
    <div className="max-w-xs">
      <PricingCTAButton slug="pro" label="Get the boilerplate" />
    </div>
  )
}

BackButton

router.history.back(), for the pages a reader arrives at from somewhere else. This one is live: pressing it navigates away from the docs.

src/lib/docs/showcase/back-button.tsx

import { BackButton } from '@/components/Button/BackButton/BackButton'

export function BackButtonDemo() {
  return <BackButton />
}

ThemeToggle

The theme switch, wired to the same store the no-flash script reads. This one is live and changes the theme of the page you are on.

src/lib/docs/showcase/theme-toggle.tsx

import { ThemeToggle } from '@/components/ThemeToggle/ThemeToggle'

export function ThemeToggleDemo() {
  return <ThemeToggle />
}