@metadiv-studio/button

A minimal, theme-agnostic React button component with built-in loading states, tooltips, and customizable variants. Built on top of Radix UI primitives for accessibility and flexibility.

Installation

npm install @metadiv-studio/button

Tailwind CSS Configuration

This package uses Tailwind CSS for styling. To ensure the component styles work correctly in your project, you need to add the package's files to your tailwind.config.js content configuration:

// tailwind.config.js
module.exports = {
  content: [
    // ... your existing content paths
    "./node_modules/@metadiv-studio/**/*.{js,ts,jsx,tsx}",
  ],
  // ... rest of your config
}

Note: Without this configuration, the button component may not display with the correct styles.

Basic Usage

The Button component supports standard HTML button props along with variant and className for styling:

import { Button } from '@metadiv-studio/button';

function App() {
  return (
    <Button variant="default" className="custom-styles">
      Click me
    </Button>
  );
}

Core Features

• Variants: Use built-in variants like default, destructive, outline, secondary, ghost
• Custom Styling: Add your own className for custom styles (note: text size cannot be changed for system consistency)
• Loading States: Built-in loading spinner with loading={true}
• Tooltips: Display tooltips on hover with tooltip="Your text"
• Accessibility: Full keyboard navigation and screen reader support
• Sizes: Predefined sizes (default, sm, lg, icon) with consistent text sizing

Custom Variants

The component includes several custom variants that extend the base button functionality:

• default: Primary button with hover effects
• destructive: Red button for destructive actions
• outline: Bordered button with subtle hover effects
• secondary: Secondary button with primary color accents
• ghost: Minimal button with hover background

System Consistency

Important: The button component enforces a fixed text size (text-xs) across all variants and sizes. This is intentional to maintain system-wide consistency and cannot be overridden through className. This ensures a cohesive design language across your application.

Requirements

• React 18.2+
• React DOM 18.2+