Eclipse Button

Buttons 2

About

Here is Eclipse Button component

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

Code

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

Usage.tsx

'use client';

import { EclipseButton } from '@/components/ui/eclipse-button';
import { ArrowRight, ChevronLeft, Settings, Github } from 'lucide-react';

export default function EclipseButtonIcons() {
return (
  <div className="p-8 flex flex-col gap-8 items-center justify-center bg-white dark:bg-neutral-950">
    {/* 
      NOTE: This layout uses container queries (@sm, @lg, etc.).
      For this to work in your own application, the parent element of this component 
      must have the Tailwind CSS class "@container".
    */}
    <div className="flex flex-col w-full gap-8 items-center @md:flex-row @md:justify-center @md:items-end">
      
      {/* Small with Left Icon */}
      <div className="flex flex-col items-center gap-2">
        <span className="text-xs text-neutral-400 font-mono uppercase">Size: SM</span>
        <EclipseButton 
          size="sm" 
          variant="outline" 
          leftIcon={<ChevronLeft className="w-3 h-3" />} 
          text="Back" 
        />
      </div>

      {/* Default with Right Icon */}
      <div className="flex flex-col items-center gap-2">
        <span className="text-xs text-neutral-400 font-mono uppercase">Size: Default</span>
        <EclipseButton 
          text="Continue" 
          rightIcon={<ArrowRight className="w-4 h-4" />} 
        />
      </div>

      {/* Large with Icon */}
      <div className="flex flex-col items-center gap-2">
        <span className="text-xs text-neutral-400 font-mono uppercase">Size: LG</span>
        <EclipseButton 
          size="lg" 
          leftIcon={<Github className="w-5 h-5" />} 
          text="Sign in with Github" 
        />
      </div>

      {/* Icon Only */}
      <div className="flex flex-col items-center gap-2">
        <span className="text-xs text-neutral-400 font-mono uppercase">Size: Icon</span>
        <EclipseButton 
          size="icon" 
          variant="ghost" 
          aria-label="Settings"
          leftIcon={<Settings className="w-5 h-5" />} 
        />
      </div>

    </div>
  </div>
);
}