Button — Sean Geng

Usage

example.tsx

import { Button } from "~/components/ui/button";
import { Link } from "react-router";

<Button>Get started</Button>
<Button variant="outline" size="sm">Cancel</Button>

// asChild merges styles onto a Link (or any element)
<Button asChild>
  <Link to="/components">Browse components</Link>
</Button>

How the depth works

It's a class-variance-authority button with the look built from two pseudo-elements. A before: layer paints the gradient fill, an after: layer adds the inner-light rim (a top highlight + 1px inset stroke), and the element itself carries a color-matched drop shadow. The label sits on a relative z-10 wrapper above both layers.

States are cheap: hover brightnesses the fill, active nudges it down a pixel and dims it. Because every variant shares this structure, a new color is just two gradient stops and a shadow tint — and asChild lets a <Link> wear the exact same styling.

button-variants.ts

// The depth is two pseudo layers + a colored shadow; content rides on z-10.
default: [
  "text-white shadow-[0_1px_2px_rgba(0,0,0,.35),0_6px_18px_-6px_hsl(var(--primary)/.6)]",
  // gradient fill
  "before:absolute before:inset-0 before:rounded-[inherit] before:bg-gradient-to-b " +
    "before:from-[hsl(217_92%_64%)] before:to-[hsl(217_90%_50%)]",
  // inner-light rim
  "after:absolute after:inset-0 after:rounded-[inherit] after:pointer-events-none " +
    "after:shadow-[inset_0_1px_0_rgba(255,255,255,.3),inset_0_0_0_1px_rgba(255,255,255,.08)]",
  // states
  "hover:before:brightness-110 active:translate-y-px active:before:brightness-90",
],

Props

prop	type	default	description
variant	default \| black \| white \| outline \| ghost \| destructive \| success \| link	"default"	Visual style.
size	"sm" \| "default" \| "lg" \| "icon"	"default"	Height & padding.
asChild	boolean	false	Render as the child element (e.g. a Link), merging styles.
…props	ButtonHTMLAttributes	—	Any native button prop (onClick, disabled, type, …).