Action Icon

npm install @kuzenbo/core

import { ActionIcon } from "@kuzenbo/core";
import { PlusIcon } from "lucide-react";

function Example() {
  return (
    <ActionIcon aria-label="Add item">
      <PlusIcon />
    </ActionIcon>
  );
}

<ActionIcon aria-label="Settings">
  <SettingsIcon />
</ActionIcon>

<div className="flex gap-2">
  <ActionIcon variant="default">
    <PlusIcon />
  </ActionIcon>
  <ActionIcon variant="outline">
    <PlusIcon />
  </ActionIcon>
  <ActionIcon variant="ghost">
    <PlusIcon />
  </ActionIcon>
  <ActionIcon variant="danger">
    <TrashIcon />
  </ActionIcon>
</div>

<div className="flex items-center gap-2">
  <ActionIcon size="xs">
    <PlusIcon />
  </ActionIcon>
  <ActionIcon size="sm">
    <PlusIcon />
  </ActionIcon>
  <ActionIcon size="md">
    <PlusIcon />
  </ActionIcon>
  <ActionIcon size="lg">
    <PlusIcon />
  </ActionIcon>
  <ActionIcon size="xl">
    <PlusIcon />
  </ActionIcon>
</div>

const [loading, setLoading] = useState(false);

<ActionIcon isLoading={loading} onClick={() => setLoading(true)}>
  <SaveIcon />
</ActionIcon>

<ActionIcon disabled>
  <DownloadIcon />
</ActionIcon>

<ActionIcon asChild>
  <a href="/settings" aria-label="Settings">
    <SettingsIcon />
  </a>
</ActionIcon>

import { ButtonGroup } from "@kuzenbo/core";

<ButtonGroup>
  <ActionIcon aria-label="Align left">
    <AlignLeftIcon />
  </ActionIcon>
  <ActionIcon aria-label="Align center">
    <AlignCenterIcon />
  </ActionIcon>
  <ActionIcon aria-label="Align right">
    <AlignRightIcon />
  </ActionIcon>
</ButtonGroup>

import { Tooltip } from "@kuzenbo/core";

<Tooltip>
  <Tooltip.Trigger asChild>
    <ActionIcon aria-label="Delete">
      <TrashIcon />
    </ActionIcon>
  </Tooltip.Trigger>
  <Tooltip.Content>Delete item</Tooltip.Content>
</Tooltip>