Command Palette

Search for a command to run...

Docs
Button Icon

Button Icon

Icon-only buttons with multiple variants for toolbar actions and compact UI.

Installation

Usage

import ButtonIcon from "@/components/ruixen/button-icon";
import { Settings, Plus, Trash } from "lucide-react";
 
export default function MyComponent() {
  return (
    <div className="flex gap-2">
      <ButtonIcon icon={<Settings className="size-4" />} />
      <ButtonIcon icon={<Plus className="size-4" />} variant="primary" />
      <ButtonIcon icon={<Trash className="size-4" />} variant="destructive" />
    </div>
  );
}

Props

PropTypeDefaultDescription
iconReact.ReactNode-The icon to display
variant"default" | "primary" | "secondary" | "outline" | "ghost" | "destructive""default"Button style variant
size"sm" | "md" | "lg""md"Button size
classNamestring-Additional CSS classes

Features

  • Compact icon-only buttons
  • Six distinct variants
  • Three size options
  • Perfect for toolbars and compact UIs
  • Accessible with proper focus states
  • Light and dark mode support