Button

Clickable button component with multiple variants and sizes.

Installation

1. Install the package

npm install d12-ui

2. Import the component

import { Button } from "d12-ui"

3. Basic Usage

Common Patterns

Form Submission

<form onSubmit={handleSubmit}>
  <Button type="submit" disabled={isLoading}>
    {isLoading ? "Submitting..." : "Submit"}
  </Button>
</form>

Navigation

import Link from "next/link"

<Button asChild>
  <Link href="/dashboard">Go to Dashboard</Link>
</Button>

With Icons

import { Download } from 'lucide-react'

<Button>
  <Download className="mr-2 h-4 w-4" />
  Download
</Button>

Button Variants

Integration Tips

Loading States

Use the disabled prop and conditional text to show loading states during async operations.

Custom Styling

Combine with Tailwind classes or use the className prop for custom styling.

Accessibility

Always provide meaningful text or aria-labels for screen readers, especially for icon-only buttons.