@Malayvasachecks…claude/design-system-base-components → master40 files · +520 −366updated 1mo agoFirst base component extracted from the post-design-system codebase. Adds <Button> and migrates ~45 hand-rolled inline CTAs across 39 files onto it.
src/components/ui/button.tsx — newA cva-based button primitive with token-aware variants:
| Tone | Behavior |
|---|---|
primary (default) | bg-foreground text-background — auto-flips black-on-light → white-on-dark. Collapses 22 hand-rolled bg-black text-white CTAs + 3 bg-white text-black CTAs into one variant. |
brand | bg-brand text-white — white reads on both sky-blue (light) and deep-blue (dark) brand colors. |
outline | border border-foreground/15 bg-card text-foreground — auto-flips per surface. |
| Size | Spec |
|---|---|
sm | h-8 px-4 |
md (default) | h-10 px-6 |
lg | h-12 px-8 |
Plus uppercase boolean for the formal CTA treatment (swaps tracking-default → tracking-wide).
Defaults bake in active:scale-[0.97] and a brand focus ring. asChild (Radix Slot) for composing with <TrackedLink> / <a> without nested interactive elements.
PricingCta wrapper to use <Button> internally; dropped its className proptracking-[-0.28px] → tracking-default/85, /90, /95) → unified /85 (via bg-foreground/85)active:scale-[0.96] → active:scale-[0.97] (baked in)sm / md / lgsrc/components/hero/v5/hero-section.tsx:859 — small white button at text-xs px-3 py-1.5; doesn't fit the size scale, single instance.support/page.tsx Contact-Sales button — unique outline-on-hover-fill pattern (hover:bg-black hover:text-white), single instance, doesn't fit any variant cleanly.import { Button, buttonVariants } from "~/components/ui/button";
// Plain button
<Button onClick={handleClick}>Submit</Button>
// As a TrackedLink (the dominant use case)
<Button asChild tone="primary" size="md">
<TrackedLink baseUrl={URLS.PLATFORM} placement="hero" event={HeroCTAEvent}>
Get started
</TrackedLink>
</Button>
// Big formal CTA
<Button size="lg" uppercase>Request demo</Button>
// Brand variant
<Button tone="brand">Try Composio</Button>
// Outline secondary
<Button tone="outline">Learn more</Button>
// Escape hatch — apply variants to any element via className
<TrackedLink ... className={buttonVariants({ tone: "primary", size: "md" })}>...</TrackedLink>
/, /pricing, /contact, /support, /enterprise, /startups, /use-case/[slug], /learning/[slug])/protection, /claude, footer in any page)/for-you, /product/[slug])/contact and /startups still submits<IconButton> for circle close/dismiss + standalone icon buttons<Eyebrow> (next base component — the dot + uppercase mono label pattern)<Badge> (the broader mono-caps chip family)<IconButton> / additional variant🤖 Generated with Claude Code
The latest updates on your projects. Learn more about Vercel for GitHub.
| Project | Deployment | Actions | Updated (UTC) |
|---|---|---|---|
| landing-new |  Ready | Preview, Comment | May 10, 2026 0:35am |