IconButton

iconbutton-1779393692558.tsx

'use client'
import { useState } from 'react'

export default function IconButton({ icon = '⚡', tooltip = 'Action', onClick, color = '#6d28d9' }) {
  const [active, setActive] = useState(false)
  return (
    <div style={{ position: 'relative', display: 'inline-block' }}>
      <button
        onClick={onClick}
        onMouseDown={() => setActive(true)}
        onMouseUp={() => setActive(false)}
        title={tooltip}
        style={{
          width: '44px',
          height: '44px',
          borderRadius: '50%',
          background: active ? color : 'transparent',
          border: '2px solid ' + color,
          color: active ? '#fff' : color,
          fontSize: '18px',
          cursor: 'pointer',
          transition: 'all 0.2s',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          transform: active ? 'scale(0.92)' : 'scale(1)',
        }}
      >
        {icon}
      </button>
    </div>
  )
}

Component info

CategoryButtons

Frameworkreact

TierFREE

Copies0

About

Circular icon button with tooltip and ripple effect

More from Buttons

import { motion, useMotionValue, useSpring } from 'framer-motion';
import React from 'react';

interface MagneticButtonProps {
  children: React.ReactNode;
  className?: string;
}

const MagneticButton: React.FC<MagneticButtonProps> = ({ children, cl

MagneticButton

Buttons

'use client';

import React, { useState, useEffect } from 'react';

interface MagneticButtonProps {
  children: React.ReactNode;
}

const MagneticButton: React.FC<MagneticButtonProps> = ({ children }) => {
  const [x, setX] = useState(0);
  const [y,

MagneticButton

Buttons

'use client';

import { useState } from 'react';

interface GlowButtonProps {
  children: React.ReactNode;
}

const GlowButton: React.FC<GlowButtonProps> = ({ children }) => {
  const [isHovered, setIsHovered] = useState(false);

  const handleMouseE

GlowButton

Buttons

import React from 'react';
import { motion } from 'framer-motion';

interface LiquidButtonProps {
  children: React.ReactNode;
}

const LiquidButton: React.FC<LiquidButtonProps> = ({ children }) => {
  return (
    <motion.button
      whileHover={{

LiquidButton

Buttons