Installation
Usage
import ButtonRounded from "@/components/ruixen/button-rounded";
import { ArrowRight, Plus } from "lucide-react";
export default function MyComponent() {
return (
<div className="flex gap-4">
<ButtonRounded>Get Started</ButtonRounded>
<ButtonRounded variant="secondary">Learn More</ButtonRounded>
<ButtonRounded variant="outline">Contact Us</ButtonRounded>
<ButtonRounded rightIcon={<ArrowRight className="size-4" />}>
Continue
</ButtonRounded>
</div>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "secondary" | "outline" | "ghost" | "destructive" | "default" | Button style variant |
size | "sm" | "md" | "lg" | "md" | Button size |
leftIcon | React.ReactNode | - | Icon on the left side |
rightIcon | React.ReactNode | - | Icon on the right side |
className | string | - | Additional CSS classes |
Features
- Pill-shaped design with full border radius
- Five distinct variants
- Three size options
- Support for left and right icons
- Light and dark mode support

