Retro Button Components

A comprehensive collection of retro-styled button components with hard shadows, vibrant colors, and smooth hover animations. Perfect for modern applications with a nostalgic twist.

Installation

npx shadcn@latest add retroButton.json

Basic Usage

API Reference

Props

Prop	Type	Default	Description
variant	"default" \| "secondary" \| "outline" \| "link"	"default"	Button style variant
size	"sm" \| "md" \| "lg" \| "icon"	"md"	Button size
loading	boolean	false	Shows loading spinner when true
disabled	boolean	false	Disables the button
className	string	-	Additional CSS classes
children	ReactNode	-	Button content

Variants

default: Primary action button with bright green background and hard shadow
secondary: Alternative styling with gray background
outline: Transparent button with colored border that fills on hover
link: Minimal styling for text-based actions

Sizes

sm: Small button (px-4 py-2, text-sm)
md: Medium button (px-6 py-2.5, text-base)
lg: Large button (px-8 py-4, text-lg)
icon: Square button for icons (h-12 w-12)

Examples

Default Buttons

Primary action buttons with the signature retro styling and hard shadow effects.

Secondary Buttons

Alternative styling for secondary actions with gray background.

Outline Buttons

Transparent buttons with colored borders that fill on hover.

Icon Buttons

Square buttons designed specifically for icons and single actions.

Link Buttons

Minimal styling for text-based actions and navigation.

Loading States

Interactive buttons with loading spinners and disabled states during async operations.

Buttons with Icons

Combining icons with text for enhanced user experience and visual clarity.

Form Actions

Common button combinations used in forms and dialogs.

Size Comparison

All available button sizes side by side for easy comparison.

Interactive Demo

Try clicking these buttons to see the retro hover and click animations in action.

Default button with shadow animation

Outline button with fill animation

Secondary button with smooth transitions

Styling

The retro button uses a hard shadow effect that moves when hovered, creating a distinctive 3D appearance. The color scheme features:

Primary Color: #00ff84 (bright green)
Text Color: #000000 (black on light backgrounds)
Border: 2px solid #000000 (black border)
Shadow: 4px 4px 0px 0px #000000 (hard black shadow)

Dark Mode Support

The component automatically adapts to dark mode with white shadows instead of black ones.

Accessibility

All buttons include proper ARIA labels when used as icon buttons
Focus states are clearly visible
Disabled states are properly communicated to screen readers
Color contrast meets WCAG guidelines

Best Practices

Use variant="default" for primary actions
Use variant="secondary" for secondary actions
Use variant="outline" for less prominent actions
Use variant="link" for navigation or text-based actions
Always provide aria-label for icon-only buttons
Use the loading prop for async operations
Combine with icons using the gap-2 className for proper spacing