Button

Clickable button component with multiple variants, sizes, and loading states.

Installation

Import the Button component from Mayura UI

import { Button as MayuraButton } from "@/components/mayur-ui";

Variants

Different button styles for various use cases

<MayuraButton variant="primary">Primary</MayuraButton>
<MayuraButton variant="secondary">Secondary</MayuraButton>
<MayuraButton variant="gradient">Gradient</MayuraButton>
<MayuraButton variant="ghost">Ghost</MayuraButton>
<MayuraButton variant="outline">Outline</MayuraButton>
<MayuraButton variant="danger">Danger</MayuraButton>

Sizes

Four different button sizes

<MayuraButton size="sm">Small</MayuraButton>
<MayuraButton size="md">Medium</MayuraButton>
<MayuraButton size="lg">Large</MayuraButton>
<MayuraButton size="xl">Extra Large</MayuraButton>

With Icons

Buttons with left or right positioned icons

import { MousePointerClick, ChevronRight } from "lucide-react";

<MayuraButton 
  icon={<MousePointerClick className="w-4 h-4" />} 
  iconPosition="left"
>
  Click Me
</MayuraButton>

<MayuraButton 
  icon={<ChevronRight className="w-4 h-4" />} 
  iconPosition="right"
>
  Next
</MayuraButton>

Loading State

Buttons with loading spinners

<MayuraButton loading variant="primary">
  Processing...
</MayuraButton>

<MayuraButton loading variant="gradient">
  Loading...
</MayuraButton>

Disabled State

Disabled buttons across variants

<MayuraButton disabled variant="primary">
  Disabled
</MayuraButton>

Props

Available props for the Button component

Prop	Type	Default	Description
variant	"primary" \| "secondary" \| "gradient" \| "ghost" \| "outline" \| "danger"	"primary"	Button style variant
size	"sm" \| "md" \| "lg" \| "xl"	"md"	Button size
loading	boolean	false	Show loading spinner
disabled	boolean	false	Disable button
icon	ReactNode	-	Icon element
iconPosition	"left" \| "right"	"left"	Icon position