Back Button

A stylish animated button component that reveals an arrow icon on hover, perfect for navigation and going back to previous pages.

Preview

Installation

Install Shadcn Button

npx shadcn@latest add button

Create the component file

mkdir -p components/shsfui/button && touch components/shsfui/button/back-button.tsx

Add the component code

Open the newly created file and paste the following code:

import * as React from "react";
import { Button, type ButtonProps } from "@/components/ui/button";
import { ArrowLeft } from "lucide-react";
import { cn } from "@/utils/cn";
 
type BackButtonProps = ButtonProps & {
  iconSize?: number;
  iconStrokeWidth?: number;
};
 
const BackButton = React.forwardRef<HTMLButtonElement, BackButtonProps>(
  (props, ref) => {
    const {
      className,
      children = "Back",
      size = "lg",
      iconSize = 16,
      iconStrokeWidth = 2,
      ...restProps
    } = props;
 
    return (
      <Button
        ref={ref}
        variant="default"
        size={size}
        className={cn("group relative overflow-hidden", className)}
        {...restProps}
      >
        <span className="translate-x-2 transition-transform duration-300 group-hover:opacity-0">
          {children}
        </span>
        <span
          className="absolute inset-0 z-10 flex items-center justify-center bg-primary-foreground/15 w-1/4 transition-all duration-300 group-hover:w-full"
          aria-hidden="true"
        >
          <ArrowLeft
            className="opacity-60"
            size={iconSize}
            strokeWidth={iconStrokeWidth}
          />
        </span>
      </Button>
    );
  }
);
 
BackButton.displayName = "BackButton";
 
export BackButton;