Component

Button Component (v2)

Updated API examples for variants, icon support, loading, and full width states.

Variants

Sizes

With Icons

Disabled / Full width

Loading States

Usage Examples

Basic Button

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

<Button variant="primary">Click Me</Button>

Button Variants

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="outline">Outline</Button>
<Button variant="soft">Soft</Button>
<Button variant="success">Success</Button>
<Button variant="warning">Warning</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="link" rightIcon={<ArrowRight className="h-4 w-4" />}>Link</Button>

Button Sizes

<Button size="xs" variant="primary">XS</Button>
<Button size="sm" variant="primary">Small</Button>
<Button size="md" variant="primary">Medium</Button>
<Button size="lg" variant="primary">Large</Button>
<Button size="xl" variant="primary">XL</Button>
<Button size="icon" aria-label="Search">
  <Search className="h-4 w-4" />
</Button>

With Icons

import { Heart, Star } from "lucide-react";

<Button leftIcon={<Heart className="h-4 w-4" />} variant="primary">
  Like
</Button>

<Button
  rightIcon={<Star className="h-4 w-4" />}
  variant="secondary"
>
  Star
</Button>

Loading & Full Width

<Button variant="primary" loading loadingText="Saving…">Save</Button>
<Button variant="destructive" loading loadingPosition="center" loadingText="Deleting…">Delete</Button>
<Button variant="secondary" loading loadingPosition="right" loadingText="Loading…">Next</Button>
<Button variant="primary" fullWidth>Full Width Action</Button>

Disabled Buttons

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

          <Button variant="secondary" disabled>
            Another Disabled
          </Button>

          <Button variant="outline" disabled>
            Outline Disabled
          </Button>