Button

Displays a button or a component that looks like a button with multiple visual variants and loading states.

$ npx ruma-ui add button

Installation

npx ruma-ui add button

Usage

import { Button } from "@/components/ui/button";

export default function ButtonDemo() {
  return (
    <div className="flex flex-wrap gap-4 items-center">
      <Button variant="default">Default</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="destructive">Destructive</Button>
    </div>
  );
}

API Reference

Prop	Type	Default	Description
variant	"default" \| "secondary" \| "outline" \| "ghost" \| "destructive"	"default"	The visual variant of the button.
size	"sm" \| "md" \| "lg" \| "icon"	"md"	The size of the button.
isLoading	boolean	false	Displays a loading spinner inside the button.
disabled	boolean	false	Disables button interactions.