Eclipse Button

Buttons 5

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 * as React from 'react';
import { EclipseButton } from '@/components/ui/eclipse-button';
import { Save } from 'lucide-react';

export default function EclipseButtonLoading() {
const [isLoading, setIsLoading] = React.useState(false);

const handleClick = () => {
  setIsLoading(true);
  setTimeout(() => setIsLoading(false), 2500);
};

return (
  <div className="p-8 flex items-center justify-center bg-neutral-50 dark:bg-neutral-900">
    <EclipseButton
      onClick={handleClick}
      isLoading={isLoading}
      text={isLoading ? "Saving Changes..." : "Save Changes"}
      leftIcon={!isLoading && <Save className="w-4 h-4" />}
    />
  </div>
);
}