Metallic Button Demo

1import { MetallicButton } from '@/registry/bucharitesh/metallic-button';
2 
3export default function MetallicButtonDemo() {
4  return (
5    <div className="flex items-center justify-center gap-10 p-20">
6      <MetallicButton size="sm" aria-label="Send">
7        <svg
8          viewBox="0 0 1024 1024"
9          xmlns="http://www.w3.org/2000/svg"
10          fill="currentColor"
11          className="-rotate-45"
12        >
13          <path d="M843.968 896a51.072 51.072 0 0 1-51.968-52.032V232H180.032A51.072 51.072 0 0 1 128 180.032c0-29.44 22.528-52.032 52.032-52.032h663.936c29.44 0 52.032 22.528 52.032 52.032v663.936c0 29.44-22.528 52.032-52.032 52.032z" />
14          <path d="M180.032 896a49.92 49.92 0 0 1-36.48-15.616c-20.736-20.8-20.736-53.76 0-72.832L807.616 143.616c20.864-20.8 53.76-20.8 72.832 0 20.8 20.8 20.8 53.76 0 72.768L216.384 880.384a47.232 47.232 0 0 1-36.352 15.616z" />
15        </svg>
16      </MetallicButton>
17 
18      <MetallicButton aria-label="Send">
19        <svg
20          viewBox="0 0 1024 1024"
21          xmlns="http://www.w3.org/2000/svg"
22          fill="currentColor"
23          className="-rotate-45"
24        >
25          <path d="M843.968 896a51.072 51.072 0 0 1-51.968-52.032V232H180.032A51.072 51.072 0 0 1 128 180.032c0-29.44 22.528-52.032 52.032-52.032h663.936c29.44 0 52.032 22.528 52.032 52.032v663.936c0 29.44-22.528 52.032-52.032 52.032z" />
26          <path d="M180.032 896a49.92 49.92 0 0 1-36.48-15.616c-20.736-20.8-20.736-53.76 0-72.832L807.616 143.616c20.864-20.8 53.76-20.8 72.832 0 20.8 20.8 20.8 53.76 0 72.768L216.384 880.384a47.232 47.232 0 0 1-36.352 15.616z" />
27        </svg>
28      </MetallicButton>
29 
30      <MetallicButton size="lg" aria-label="Send">
31        <svg
32          viewBox="0 0 1024 1024"
33          xmlns="http://www.w3.org/2000/svg"
34          fill="currentColor"
35          className="-rotate-45"
36        >
37          <path d="M843.968 896a51.072 51.072 0 0 1-51.968-52.032V232H180.032A51.072 51.072 0 0 1 128 180.032c0-29.44 22.528-52.032 52.032-52.032h663.936c29.44 0 52.032 22.528 52.032 52.032v663.936c0 29.44-22.528 52.032-52.032 52.032z" />
38          <path d="M180.032 896a49.92 49.92 0 0 1-36.48-15.616c-20.736-20.8-20.736-53.76 0-72.832L807.616 143.616c20.864-20.8 53.76-20.8 72.832 0 20.8 20.8 20.8 53.76 0 72.768L216.384 880.384a47.232 47.232 0 0 1-36.352 15.616z" />
39        </svg>
40      </MetallicButton>
41    </div>
42  );
43}