How to Add a Button to a React App

Before installing the Button, make sure your React project has the three things Drivn assumes: Tailwind CSS v4 installed and processing your CSS, TypeScript configured (the component ships as a .tsx file), and a @/ path alias pointing at your source directory. If you scaffolded with create-next-app, npm create vite, or npx drivn@latest create, all three are already wired up. For a custom setup, open your tsconfig.json and verify the compilerOptions.paths entry; the installation page lists the minimal viable config. The Button uses lucide-react for its loading spinner and any icon props — the CLI adds it automatically during install if it is missing from your package.json. No PostCSS plugins, Babel presets, or Tailwind config changes are required.

Run the CLI from your project root to add the Button source file. The command prompts once for your install directory (defaulting to src/components/ui/), then writes button.tsx and adds lucide-react to your package.json if it is not already present. No global config file is created — the Button is just a TypeScript file in your repo that you can edit like any other component. Confirm the file landed correctly in your editor, then commit the change. If your project uses a monorepo layout or a non-standard path, the CLI docs cover the flags used to target a custom location during install.

Open the page where the Button should live and import it from your UI directory. A single import line gives you the component; the default render is a pill-shaped button with the default variant and md size. Because the Button is a React.forwardRef wrapper around a native <button>, it forwards refs for focus management and spreads every standard button attribute — onClick, type, form, aria-* — straight through to the element. That also means it has no hooks and no 'use client' directive, so it renders inside a Server Component without a client boundary. See the Button docs for the full prop table and the examples page for complete patterns.

The Button exposes four typed props for appearance and state. variant accepts default, secondary, outline, or destructive; size accepts sm, md, or lg; rounded accepts md or full. Icons are passed as component references — leftIcon={Plus} and rightIcon={ArrowRight} — not as JSX elements, so there is no per-call-site boilerplate. The loading prop shows a spinning Loader2 icon and disables the button so clicks cannot fire during async work. Every one of these is typed from keyof typeof styles, so your editor autocompletes the valid values and rejects typos. The loading state example shows the full async pattern with a try/finally block.

Because the Button lives in your codebase, customization is a source edit rather than a prop API. Open src/components/ui/button.tsx and find the const styles object near the top — it holds every class name the component uses, grouped into base, sizes, variants, and rounded. Add a key to variants for a brand-specific style, adjust sizes for a denser layout, or change the base string to tweak the transition. The types read straight from keyof typeof styles.variants, so adding a key makes it available and autocompleted on the variant prop instantly. To re-theme every button at once instead, change the color tokens it references — bg-foreground, bg-destructive, border-border — in your theme tokens.