Hover Expand Button

Buttons

About

Reveals labek on hover for an alternative usecase of tooltip, lingers 800ms before collapsing, and direction-aware layout anchoring.

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

Code

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

Usage.tsx

import { HoverExpandButton } from "@/components/ui/hover-expand-button-lucis";

export const settings = {
  label: 'ADDE NOVUM',
  variant: 'cta',
  size: 'md',
  expandDirection: 'right',
  rotateIcon: true,
  disabled: false,
};

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

  return (
    <div className="flex min-h-[420px] w-full flex-col items-center justify-center gap-12 font-sans p-6 sm:p-10 bg-background text-foreground">
      {/* Primary Interactive Specimen connected to Controls */}
      <div className="flex flex-col items-center gap-3">
        <div className="flex items-center justify-center min-w-[220px] h-12">
          <HoverExpandButton
            label={current.label}
            variant={current.variant as any}
            size={current.size as any}
            expandDirection={current.expandDirection as any}
            rotateIcon={current.rotateIcon as any}
            disabled={current.disabled}
          />
        </div>
        <span className="font-mono text-xs text-neutral-400">
          Hover to expand · 800ms before collapse
        </span>
      </div>

      {/* 5-Column Preset Showcase with Balanced Symmetrical Spacing */}
      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-6 w-full max-w-5xl pt-8 border-t border-neutral-200 dark:border-neutral-800">
        {/* 01: Expand Right Outline (Standard left-anchor, outlined and not filled) */}
        <div className="flex flex-col gap-2.5 min-w-[130px]">
          <div className="flex items-center justify-start h-12">
            <HoverExpandButton
              label="FILTRA TABULAM"
              variant="outline"
              size="md"
              expandDirection="right"
            />
          </div>
          <div className="flex flex-col text-left">
            <span className="font-mono text-xs font-semibold text-foreground">
              Expand Right Outline
            </span>
            <span className="font-mono text-[11px] text-muted-foreground">
              variant="outline" • 44px
            </span>
          </div>
        </div>

        {/* 02: Default Expand CTA (Opposite: left-anchored while expanding left) */}
        <div className="flex flex-col gap-2.5 min-w-[130px]">
          <div className="flex items-center justify-start h-12">
            <HoverExpandButton
              label="APPARATUS"
              variant="cta"
              size="md"
              expandDirection="left"
            />
          </div>
          <div className="flex flex-col text-left">
            <span className="font-mono text-xs font-semibold text-foreground">
              Expand Left CTA
            </span>
            <span className="font-mono text-[11px] text-muted-foreground">
              opposite anchor • 44px
            </span>
          </div>
        </div>

        {/* 03: Micro Solid (Balanced Center) */}
        <div className="flex flex-col gap-2.5 min-w-[110px]">
          <div className="flex items-center justify-center h-12">
            <HoverExpandButton
              label="CLAUSUS"
              variant="solid"
              size="micro"
              expandDirection="right"
            />
          </div>
          <div className="flex flex-col text-center">
            <span className="font-mono text-xs font-semibold text-foreground">
              Micro Solid
            </span>
            <span className="font-mono text-[11px] text-muted-foreground">
              size="micro" • 32px
            </span>
          </div>
        </div>

        {/* 04: Danger Purge (Opposite: right-anchored while expanding right) */}
        <div className="flex flex-col gap-2.5 min-w-[130px]">
          <div className="flex items-center justify-end h-12">
            <HoverExpandButton
              label="PURGA OMNIA"
              variant="danger"
              size="md"
              rotateIcon={false}
              icon={
                <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                  <path d="M3 6h18m-2 0v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6m3 0V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
                </svg>
              }
            />
          </div>
          <div className="flex flex-col text-right">
            <span className="font-mono text-xs font-semibold text-destructive">
              Danger Purge
            </span>
            <span className="font-mono text-[11px] text-muted-foreground">
              opposite anchor • icon slot
            </span>
          </div>
        </div>

        {/* 05: Expand Left Dashed (Standard right-anchor) */}
        <div className="flex flex-col gap-2.5 min-w-[130px]">
          <div className="flex items-center justify-end h-12">
            <HoverExpandButton
              label="ADDE NOVUM"
              variant="dashed"
              size="md"
              expandDirection="left"
            />
          </div>
          <div className="flex flex-col text-right">
            <span className="font-mono text-xs font-semibold text-foreground">
              Expand Left Dashed
            </span>
            <span className="font-mono text-[11px] text-muted-foreground">
              expandDirection="left" • 44px
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}