IconButton

The IconButton component provides a circular ghost button optimized for displaying icons, with optional tooltip support.

Import

import { IconButton } from "amvasdev-ui";

Examples

Basic Usage

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

  <IconButton icon={<Settings size={20} />} />

With Tooltip

import { Edit, Trash } from "lucide-react";
  import { IconButton } from "amvasdev-ui";

  <IconButton icon={<Edit size={18} />} tooltip="Edit item" />

  <IconButton
    icon={<Trash size={18} />}
    tooltip={{ content: "Delete", position: "left" }}
  />

With Custom Tooltip Content

<IconButton
  icon={<Trash size={18} />}
  tooltip={{
    content: (
      <div className="flex flex-col">
        <span className="font-bold">Delete</span>
        <span className="text-xs">Cannot be undone</span>
      </div>
    ),
    position: "down",
  }}
/>