Button

import { Button } from "@/components/optics/button";import { Sparkle } from "lucide-react";import Link from "next/link";<div className="flex flex-wrap items-center justify-center gap-4">  <Button>    Default  </Button>  <Button variant="decorations">    Decorations  </Button>  <Button variant="secondary">    Secondary  </Button>  <Button variant="outline">    Outline  </Button>  <Button variant="info">    Info  </Button>  <Button variant="success">    Success  </Button>  <Button variant="warning">    Warning  </Button>  <Button variant="muted">    Muted  </Button>  <Button variant="ghost">    Ghost  </Button>  <Button variant="destructive">    Destructive  </Button>  <Button variant="raised">    Raised  </Button>  <Button size="lg">    Large  </Button>  <Button size="icon-lg">    <Sparkle />  </Button>  <Button size="icon">    <Sparkle />  </Button>  <Button size="icon-sm">    <Sparkle />  </Button>  <Button size="sm">    Small  </Button>  <Button    render={<q href="#">Link<ArrowUpRight className="-ml-1" size={16}/></q>}    variant="link"  /></div>