Core

Icon button

A square button for a single icon, with the same variants and pixel dissolve as Button. Pass the icon (any SVG, e.g. from lucide-react) as the child; it is sized to the text.

demos/icon-button.tsx

import { IconButton } from "pixelbits/icon-button";

const Plus = () => (
  <svg
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="1.5"
    aria-hidden="true"
  >
    <path d="M12 5v14M5 12h14" />
  </svg>
);

export default function Demo() {
  return (
    <div className="flex items-center gap-3">
      <IconButton aria-label="Add" size="sm">
        <Plus />
      </IconButton>
      <IconButton aria-label="Add">
        <Plus />
      </IconButton>
      <IconButton aria-label="Add" size="lg" variant="primary">
        <Plus />
      </IconButton>
    </div>
  );
}

Installation

npm: import

import { IconButton } from "pixelbits/icon-button";

shadcn: copy the source

npx shadcn add https://pixelbits.ali-moradi-develop.com/r/icon-button.json

API

<IconButton>

A square button for a single icon, with the same variants and pixel dissolve as Button. Pass the icon (any SVG, e.g. from lucide-react) as the child; it is sized to the text.

Example

<IconButton aria-label="Close" variant="ghost" onClick={close}>
  <XIcon />
</IconButton>

Prop	Type	Default	Description
size	"sm" \| "md" \| "lg"	"md"	Square size: `"sm"` 32 px, `"md"` 40 px, `"lg"` 48 px.
aria-label*	string	—	Accessible name, read by screen readers. Required: an icon alone has no text, e.g. `aria-label="Close"`.

Also accepts every prop of Omit<ButtonProps, "size">.