IconButton Utilities

Utility function for generating icon button classes with the default circular ghost button styling.

Import

import { getIconButtonClasses } from "amvasdev-ui";

Functions

getIconButtonClasses

Returns the default styling for icon buttons: circular ghost button with proper spacing and hover effects

getIconButtonClasses(): string

Returns: string - Icon button class names (circular ghost button styling)

Live Demo

Basic Icon Buttons:

With Custom Colors:

Generated Classes:

ui:relative ui:btn-ghost ui:rounded-full ui:w-fit ui:p-2 ui:transition-colors ui:flex ui:items-center ui:justify-center ui:hover:bg-base-200

Examples

Basic Icon Button

import { getIconButtonClasses } from "amvasdev-ui";
import { Settings } from "lucide-react";

const iconButtonClasses = getIconButtonClasses();

<button className={iconButtonClasses}>
  <Settings size={20} />
</button>

With Custom Classes

import { getIconButtonClasses } from "amvasdev-ui";
import { Trash } from "lucide-react";
import clsx from "clsx";

const iconButtonClasses = getIconButtonClasses();

<button
  className={clsx(iconButtonClasses, "text-error hover:bg-error hover:text-error-content")}
  onClick={handleDelete}
>
  <Trash size={18} />
</button>

Custom Icon Button Component

import { getIconButtonClasses } from "amvasdev-ui";
import clsx from "clsx";

function CustomIconButton({ icon, onClick, className, ...props }) {
  const baseClasses = getIconButtonClasses();

  return (
    <button
      className={clsx(baseClasses, className)}
      onClick={onClick}
      {...props}
    >
      {icon}
    </button>
  );
}

Icon Button with Tooltip

import { getIconButtonClasses } from "amvasdev-ui";
import { Edit } from "lucide-react";
import { useState } from "react";

function IconButtonWithTooltip({ icon, tooltip, onClick }) {
  const [showTooltip, setShowTooltip] = useState(false);
  const classes = getIconButtonClasses();

  return (
    <div className="relative">
      <button
        className={classes}
        onClick={onClick}
        onMouseEnter={() => setShowTooltip(true)}
        onMouseLeave={() => setShowTooltip(false)}
      >
        {icon}
      </button>
      {showTooltip && (
        <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-base-content text-base-100 text-xs rounded">
          {tooltip}
        </div>
      )}
    </div>
  );
}

Notes

  • Returns classes for circular ghost button styling
  • Includes proper padding, transitions, and hover effects
  • Designed specifically for icon-only buttons