Action Button

Buttons

About

Action button primitive. Features custom physics, pulse for CTA and with error/loading micro-interactions.

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

Code

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

Usage.tsx

import { ActionButton } from "@/components/ui/action-button-lucis";

export const settings = {
  variant: 'cta',
  size: 'lg',
  isLoading: false,
  isError: false,
  rounded: false,
  disabled: false,
};

export default function Demo(props: Partial<typeof settings>) {
  const current = { ...settings, ...props };

  return (
    <div className="flex min-h-[300px] w-full items-center justify-center font-sans">
      <div className="flex flex-col items-center gap-6">
        <ActionButton
          variant={current.variant as any}
          size={current.size as any}
          isLoading={current.isLoading}
          isError={current.isError}
          rounded={current.rounded}
          disabled={current.disabled}
        >
          {/* If micro, show an arrow icon. Otherwise, show text! */}
          {current.size === 'micro' ? (
            <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>
          ) : current.isLoading ? (
            'Authenticating...'
          ) : current.isError ? (
            'Authentication Failed'
          ) : (
            'Start Session'
          )}
        </ActionButton>

      </div>
    </div>
  );
}