Button Component Documentation

Complete Installation Guide

Comprehensive step-by-step instructions to install and use the Buttoncomponent in your React/Next.js project with TypeScript and JavaScript support.

npx screenui add button --lang ts --path src/components

npx screenui add button --lang js --path src/components

TypeScript Implementation

Complete TypeScript code examples for the Button component with full type safety, props interface, and implementation details.

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

export function Example() {
  return (
    <Button className="bg-blue-500 text-white hover:bg-blue-600">
      Click Me
    </Button>

      <Button 
      variant="outline" 
      icon={<Trash />}
      className="border-red-500 text-red-500 hover:bg-red-50"
    >
      Delete
    </Button>
  );
}

JavaScript Implementation

Complete JavaScript code examples for the Button component with ES6+ syntax, modern React patterns, and compatibility notes.

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

export function Example() {
  return (
    <Button className="bg-blue-500 text-white hover:bg-blue-600">
      Click Me
    </Button>

      <Button 
      variant="outline" 
      icon={<Trash />}
      className="border-red-500 text-red-500 hover:bg-red-50"
    >
      Delete
    </Button>
  );
}

Required Dependencies and Prerequisites

The following packages and tools are required to use this component. Ensure all dependencies are installed and properly configured.

• react - Core React library for component functionality
• tailwindcss - Utility-first CSS framework for styling
• lucide-react - Icon library for visual elements

Usage Examples and Best Practices

Practical examples and recommended patterns for implementing and customizing the Button component in your React/Next.js application.

Frequently Asked Questions