UI Components

Button

A versatile button component with multiple variants and sizes

Quick Preview

Structure

Anatomy of the Button — what parts it can contain and their roles.

✦Label✦

Label — required · any ReactNodeIcon slot — optional · left or right · any ReactNodeContainer — rounded-[8px] · responsive padding per size

States

Hover, click, or press Tab to focus each button and observe live CSS transitions.

Primary — interactive states

Hover or Tab to each cell to trigger the live state

5 states

Default

Resting

Hover

↑ Move cursor over

Focus

⌨ Tab key to reach

Disabled

pointer-events-none

disabled + spinner

Variants — all four at rest

Click any button to see its active state

4 states

Primary

Secondary

Outline

Ghost

Variants — disabled state

All variants with disabled prop applied

4 states

Primary

Secondary

Outline

Ghost

Sizes

Three size tokens — sm md (default) lg.

Sizes — sm / md / lg

Visual comparison of all three size tokens

3 states

Small — sm

px-4 py-2 text-sm

Medium — md

px-6 py-3 text-base · default

Large — lg

px-8 py-4 text-lg

Installation

// Copy the Button component from
src/components/ui/Button.tsx

Usage

import { Button } from '@/components/ui/Button'

export default function Example() {
  return (
    <Button variant="primary" size="md">
      Get started
    </Button>
  )
}

Examples

With Icons

Pass icons as children alongside the label text

Full Width

Stretch to container width with className w-full

Prompt Preview

Copy a prompt that recreates this UI

Paste this into your AI coding assistant to generate code that closely matches the reference, including color, size, shape, typography, spacing, and polish.

Copy-ready AI prompt

Starts from the current visual reference and project constraints.

Build a ui component named Button in React/Next.js.
Goal: recreate the same overall UI and behavior as the Button reference from a component gallery.
What it needs to communicate: A versatile button component with multiple variants and sizes.

Project constraints:
- Use Next.js 16.2.6 with the App Router, React 19, TypeScript strict mode, and Tailwind CSS v4.
- Do not create a tailwind.config.js file. Use Tailwind v4 utilities and CSS variables where design tokens are needed.
- If you are implementing this inside the same project, use the Prompt font via next/font/google. If not, use the closest equivalent typeface.
- Return production-ready code with imports, responsive behavior, keyboard accessibility, and polished empty, hover, focus, active, and disabled states where relevant.
- Match the reference closely: color palette, spacing scale, border radius, shadows, icon scale, typography hierarchy, and motion timing.

Component-specific expectations:
- Keep the API concise and reusable.
- Make visual states feel polished and consistent across variants and sizes.
- Avoid unnecessary dependencies unless the behavior truly requires them.
- No explicit color literals were found in the examples. Match the live reference and the project accent color when appropriate.

Props to support:
- variant: "primary" | "secondary" | "outline" | "ghost" — default "primary" — Visual style variant of the button
- size: "sm" | "md" | "lg" — default "md" — Size of the button
- asChild: boolean — Render as a child component (for custom elements)
- disabled: boolean — Disable button interactions

Reference usage patterns:
- Primary Button

```tsx
<Button variant="primary">Click me</Button>
```

- All Variants — Button with different visual styles

```tsx
<div className="flex gap-4">
  <Button variant="primary">Primary</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="outline">Outline</Button>
  <Button variant="ghost">Ghost</Button>
</div>
```

- All Sizes — Button in different sizes

```tsx
<div className="flex gap-4 items-center">
  <Button size="sm">Small</Button>
  <Button size="md">Medium</Button>
  <Button size="lg">Large</Button>
</div>
```

Feature expectations:
- Multiple variants (primary, secondary, outline, ghost)
- Three sizes (sm, md, lg)
- ForwardRef support
- Disabled state handling
- Smooth transitions
- Focus-visible ring

Output requirements:
- Return complete code, not pseudocode.
- Include all necessary imports and helper types.
- Keep the implementation accessible, responsive, and visually finished.
- Match the reference for color, size, shape, typography, spacing, and interaction states as closely as possible.
- If multiple files are needed, organize them cleanly and explain the file structure briefly.

Tweak only product-specific copy or data after the first generation pass.

Props

Prop	Type	Default	Description
`variant`	`"primary" \| "secondary" \| "outline" \| "ghost"`	`"primary"`	Visual style variant of the button
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size of the button
`asChild`	`boolean`	-	Render as a child component (for custom elements)
`disabled`	`boolean`	-	Disable button interactions

Features

✓Multiple variants (primary, secondary, outline, ghost)
✓Three sizes (sm, md, lg)
✓ForwardRef support
✓Disabled state handling
✓Smooth transitions
✓Focus-visible ring

← Back to UI Components