Linear Button

Buttons 9

About

here is button component

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

Code

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

Usage.tsx

// demo.tsx
import React from 'react';
import Button from '@/components/ui/button';
import { Mail, ArrowRight, Loader2 } from 'lucide-react';

const ButtonDemo = () => {
   return (
      <div className="flex w-full flex-col items-start gap-8 p-4">
         <div className="flex flex-wrap items-center gap-4">
            <Button>Default</Button>
            <Button variant="destructive">Destructive</Button>
            <Button variant="outline">Outline</Button>
            <Button variant="secondary">Secondary</Button>
            <Button variant="ghost">Ghost</Button>
            <Button variant="link">Link</Button>
         </div>
         <div className="flex flex-wrap items-center gap-4">
            <Button size="lg">Large</Button>
            <Button size="default">Default</Button>
            <Button size="sm">Small</Button>
            <Button size="xs">Extra Small</Button>
            <Button size="icon">
               <ArrowRight />
            </Button>
         </div>
         <div className="flex flex-wrap items-center gap-4">
            <Button>
               <Mail />
               Login with Email
            </Button>
            <Button disabled>
               <Loader2 className="animate-spin" />
               Please wait
            </Button>
            <Button asChild>
               <a href="/login">Login</a>
            </Button>
         </div>
      </div>
   );
};

export { ButtonDemo as DemoOne };