Command Palette

Search for a command to run...

Docs
Button Rounded

Button Rounded

Pill-shaped buttons with rounded corners for a softer aesthetic.

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

PropTypeDefaultDescription
variant"default" | "secondary" | "outline" | "ghost" | "destructive""default"Button style variant
size"sm" | "md" | "lg""md"Button size
leftIconReact.ReactNode-Icon on the left side
rightIconReact.ReactNode-Icon on the right side
classNamestring-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