Button BackToTop

1npm install lucide-react

1npx shadcn-ui@latest add button

1'use client';
2
3import { Button, ButtonProps } from '@/ui/Button';
4import { cn } from '@/lib/utils';
5import { ArrowUp } from 'lucide-react';
6
7/**
8 * Renders a button component that scrolls the page to the top when clicked.
9 *
10 * @param buttonText - The text to display on the button. Default is 'Back to top'.
11 * @param showArrowIcon - Determines whether to show an arrow icon next to the button text. Default is true.
12 * @param className - Additional CSS class names to apply to the button.
13 * @param variant - The variant of the button. Default is 'secondary'.
14 */
15export default function Button_BackToTop({
16	buttonText = 'Back to top',
17	showArrowIcon = true,
18	className,
19	variant,
20}: {
21	buttonText?: string;
22	showArrowIcon?: boolean;
23	className?: string;
24	variant?: ButtonProps['variant'];
25}) {
26	return (
27		<Button
28			className={cn('fixed bottom-4 right-4 z-50', className)}
29			onClick={() => {
30				window.scrollTo({ top: 0, behavior: 'smooth' });
31			}}
32			variant={variant || 'secondary'}
33		>
34			{buttonText}
35			{showArrowIcon && <ArrowUp size={18} className="pl-1" />}
36		</Button>
37	);
38}

1import {Button_BackToTop} from '@/components/button-back-to-top'
2
3export default function Page(){
4  return(
5    <Button_BackToTop />
6  )
7}