Actions & buttons / CSS
Border-trace button
A moving highlight that traces the edge of your next action.
Preparing the component workbench…
Actions & buttons / CSS
A moving highlight that traces the edge of your next action.
SOURCE / REACT · provisional
import BorderTraceButton from "@/components/buildwithme/border-trace-button/react";
<BorderTraceButton />// MIT · BuildWithMe-UI contributors. Original implementation.
'use client';
import { useAnimation, type AnimationProps } from './use-animation';
import './base.css';
import './border-trace-button.css';
export default function BorderTraceButton({
paused = false,
label = 'Explore the possibilities',
onClick,
}: AnimationProps & { label?: string; onClick?: () => void }) {
const { ref, active } = useAnimation(paused);
return (
<div ref={ref} className="bw-demo" data-active={active}>
<button type="button" className="bw-button bw-trace" onClick={onClick}>
<span>{label}</span>
</button>
</div>
);
}
Install the registry item to receive all 7 files and their declared dependencies. Copying one file may require the other files shown here.