"use client"; /** * @author: @kokonut-labs * @description: Slide Text Button with animated vertical text transition * @version: 1.0.0 * @date: 2025-11-02 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import Link from "next/link"; import { cn } from "@/lib/utils"; interface SlideTextButtonProps extends React.AnchorHTMLAttributes { text?: string; hoverText?: string; href?: string; className?: string; variant?: "default" | "ghost"; /** Fades and slides the button in when it mounts. */ animateIn?: boolean; } export default function SlideTextButton({ text = "Browse Components", hoverText, href = "/docs", className, variant = "default", animateIn = true, ...props }: SlideTextButtonProps) { const slideText = hoverText ?? text; const variantStyles = variant === "ghost" ? "border border-black/10 text-black hover:bg-black/5 dark:border-white/10 dark:text-white dark:hover:bg-white/5" : "bg-black text-white hover:bg-black/90 dark:bg-white dark:text-black dark:hover:bg-white/90"; return ( {/* Both labels share one grid cell, so the wider one sets the width and both stay centred; the hover label waits one row below. */} {text} ); }

Slide Text Button

On this page