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
| Prop | Type | Default | Description |
|---|---|---|---|
icon | React.ReactNode | - | The icon to display |
variant | "default" | "primary" | "secondary" | "outline" | "ghost" | "destructive" | "default" | Button style variant |
size | "sm" | "md" | "lg" | "md" | Button size |
className | string | - | 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

