Button

A clickable element that triggers actions — the most fundamental interactive component in any application.

Use Cases

• Submit forms (login, signup, checkout)
• Trigger navigation or route changes
• Open modals, dropdowns, or drawers
• Confirm destructive actions (delete, cancel)
• Toggle states (like/unlike, follow/unfollow)
• Copy text to clipboard
• Download files or export data

Simplest Implementation

"use client";
 
interface ButtonProps {
  children: React.ReactNode;
  onClick?: () => void;
}
 
export function Button({ children, onClick }: ButtonProps) {
  return (
    <button
      onClick={onClick}
      className="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 active:bg-blue-800"
    >
      {children}
    </button>
  );
}

A minimal button with hover and active states. The onClick is optional so the button can also be used as a type="submit" inside forms without needing a handler.

Variations

Variant Styles

"use client";
 
type Variant = "primary" | "secondary" | "danger" | "ghost" | "outline";
 
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: Variant;
  children

Uses a Record to map variant names to Tailwind classes. Extends ButtonHTMLAttributes so all native attributes (disabled, type, form, etc.) pass through automatically.

Size Variants

"use client";
 
type Size = "sm" | "md" | "lg";
 
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  size?: Size;
  children: React.ReactNode;

Separating size from variant keeps the class logic manageable. Combine with the variant pattern for a full button system.

Loading State

"use client";
 
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  loading?: boolean;
  children: React.ReactNode;
}
 
export function Button({ loading, children

The spinner SVG is inline so no icon library is needed. The button disables itself while loading to prevent double-clicks.

Icon Button

"use client";
 
interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  label: string;
  children: React.ReactNode;
}
 
export function IconButton({ label, children

Icon-only buttons require aria-label for accessibility. The fixed h-10 w-10 keeps the click target consistent regardless of icon size.

Button as Link (Polymorphic)

"use client";
 
import Link from "next/link";
 
type ButtonAsLinkProps = {
  href: string;
  children: React.ReactNode;
  className?: string;
};
 
type ButtonAsButtonProps

A discriminated union on href lets the same component render as either a <button> or a Next.js <Link>. TypeScript enforces that href and onClick don't mix incorrectly.

Form Submit Button with useFormStatus

"use client";
 
import { useFormStatus } from "react-dom";
 
export function SubmitButton({ children }: { children: React.ReactNode }) {
  const { pending } = useFormStatus();
 
  return

useFormStatus must be called in a component that is a child of a <form>. It reads the pending state from the parent form's action, so you don't need to pass loading props manually.

Complex Implementation

"use client";
 
import { forwardRef } from "react";
import Link from "next/link";
 
type Variant = "primary" | "secondary" | "danger" | "ghost" | "outline";
type Size = "sm" |

Key aspects:

• Polymorphic rendering — discriminated union on href switches between <button> and <Link> while maintaining correct TypeScript types for both.
• forwardRef — allows parent components to attach refs for focus management, scroll-to, or animation libraries.
• Focus-visible ring — focus-visible:ring-2 focus-visible:ring-offset-2 shows a focus ring only on keyboard navigation, not mouse clicks.
• Loading replaces leftIcon — the spinner takes the leftIcon's slot, preventing layout shift during loading.
• Link disabled pattern — links can't truly be disabled, so aria-disabled and tabIndex={-1} simulate it while pointer-events-none prevents clicks.
• Class composition — array of class strings joined with filter(Boolean) keeps things readable and avoids extra spaces from conditional empty strings.

Gotchas

• Missing type="button" on non-submit buttons — Buttons inside a <form> default to type="submit", which submits the form on click. Always add type="button" for buttons that aren't meant to submit.

• Using <a> instead of <Link> for internal navigation — Plain <a> tags cause a full page reload. Use Next.js <Link> for client-side navigation.

• Disabled buttons swallowing events — A disabled button doesn't fire onClick, which breaks tooltip or popover triggers. Wrap the button in a <span> if you need events on a disabled button.

• Missing accessible name on icon buttons — A button with only an SVG icon has no text for screen readers. Always add aria-label to icon-only buttons.

• Loading state without disabling — Showing a spinner but not disabling the button allows double-submissions. Always set disabled={true} or pointer-events-none when loading.

• Inline arrow functions causing unnecessary re-renders — onClick={() => doSomething(id)} creates a new function each render. This rarely matters, but in a list of 100+ buttons, extract the handler or use useCallback.

Related

• Forms — Form submission patterns that use buttons
• Event Handling — onClick and event handler typing
• Tailwind Utilities — Utility classes used in button styling