Button

Buttons

About

Awesome header, footer and collection

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Button to your project and fits it to your theme.

Code

How Button is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// Import React
import * as React from "react";

// Import the Button component
import { Button } from "@/components/ui/button";

// Define a simple Button variant demo
const DemoPrimaryButton = () => (
  <Button variant="primary" onClick={() => alert("Primary Button Clicked!")}>
    Click Me
  </Button>
);

// Define another Button variant demo
const DemoSecondaryButton = () => (
  <Button variant="secondary" onClick={() => alert("Secondary Button Clicked!")}>
    Secondary Action
  </Button>
);

// Export the demo variants
export { DemoPrimaryButton, DemoSecondaryButton };