IconButton Component

A customizable and interactive icon button with ripple effect, loading state, and elegant text reveal animation on hover.

Features

• Ripple Effect: Animated click feedback
• Loading State: Built-in spinner animation
• Hover Animation: Smooth transition from icon-only to text-reveal state
• Multiple Variants: contained, outlined, text, and gradient
• Color Schemes: primary, secondary, accent, danger, success
• Size Options: small, medium, large
• Rounded Corners: sm, md, lg, full
• Disabled State: Visual indication for disabled buttons
• Customizable: Extendable via className and style props

Props

| Prop | Type | Default | Description | |-------------|-------------------------------------------|--------------|-----------------------------------------------------------------------------| | children | React.ReactNode | Required | Text content to reveal on hover | | icon | React.ReactNode | Required | Icon element to display | | variant | "contained"\|"outlined"\|"text"\|"gradient" | "contained" | Visual style variant | | color | "primary"\|"secondary"\|"accent"\|"danger"\|"success" | "primary" | Color scheme | | size | "small"\|"medium"\|"large" | "medium" | Size of button | | rounded | "sm"\|"md"\|"lg"\|"full" | "md" | Border radius style | | isLoading | boolean | false | Shows loading spinner when true | | disabled | boolean | false | Disables interaction | | onClick | (event: React.MouseEvent<HTMLButtonElement>) => void | Optional | Click handler function | | className | string | Optional | Additional CSS classes | | style | React.CSSProperties | Optional | Inline styles | | type | "button"\|"submit"\|"reset" | "button" | HTML button type attribute | | ...rest | React.ButtonHTMLAttributes<HTMLButtonElement> | | Standard button attributes |

Usage

import IconButton from './IconButton';
import { PlusIcon } from '@heroicons/react/24/solid';

function App() {
  return (
    <div className="flex gap-4 items-center">
      {/* Basic Usage */}
      <IconButton icon={<PlusIcon className="w-5 h-5" />}>
        Add Item
      </IconButton>

      {/* Outlined Variant */}
      <IconButton 
        variant="outlined" 
        color="secondary"
        icon={<PlusIcon className="w-5 h-5" />}
      >
        Create
      </IconButton>

      {/* Loading State */}
      <IconButton 
        isLoading={true}
        icon={<PlusIcon className="w-5 h-5" />}
      >
        Processing...
      </IconButton>

      {/* Gradient Variant */}
      <IconButton 
        variant="gradient"
        color="accent"
        size="large"
        icon={<PlusIcon className="w-6 h-6" />}
      >
        Premium Action
      </IconButton>

      {/* Full Rounded */}
      <IconButton 
        rounded="full"
        color="danger"
        icon={<TrashIcon className="w-5 h-5" />}
      >
        Delete Item
      </IconButton>
    </div>
  );
}