Actions

Button

Square, uppercase, tracked. Solid for the one action a view asks for, outline for everything after it.

components/coach/button.tsx

Examples

Variants
Light, on photography
Sizes
Block, on mobile
Disabled

Anatomy

  1. 011px border, square corners
  2. 02Label in Helvetica caps, 12px, tracked 0.104em
  3. 03Optional 14px icon before the label

Usage

components/coach/button.tsx
import { Button, coachButtonVariants } from "@/components/coach/button";

<Button>Sign up</Button>
<Button variant="outline" size="sm">Load more</Button>

// A link that looks like a button
<a className={coachButtonVariants({ variant: "light" })} href="/shop">Shop the look</a>

Props

PropTypeDefaultDescription
variant"solid" | "outline" | "light" | "ghost""solid"Solid ink for the primary action; outline for secondary; light on photography; ghost for tertiary.
size"sm" | "md" | "lg""md"32, 44 or 52px tall. The label stays 12px caps.
blockbooleanfalseFull width. The mobile default for Load more.
type"button" | "submit" | "reset""button"Defaults to button, so it never submits a form by accident.
...propsButtonHTMLAttributes—disabled, onClick and the rest.

Guidance

Do

  • One solid button per view.
  • Write the action as a verb: Sign up, Load more.

Don't

  • Round the corners. Pills are for filters only.
  • Put two solid buttons side by side.

Where it's used