import { type VariantProps, cva } from "class-variance-authority"; import { cn } from "@/lib/utils"; import { Button as ShadcnButton } from "@/components/ui/button"; import "./styles/retro.css"; export const buttonVariants = cva("", { variants: { font: { normal: "", retro: "retro", }, variant: { default: "bg-foreground", destructive: "bg-foreground", outline: "bg-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-9 px-4 py-2 has-[>svg]:px-3", sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5", lg: "h-10 rounded-md px-6 has-[>svg]:px-4", icon: "size-9", }, }, defaultVariants: { variant: "default", size: "default", }, }); export interface BitButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean; ref?: React.Ref; } function Button({ children, asChild, ...props }: BitButtonProps) { const { variant, size, className, font } = props; return ( {asChild ? ( {children} {variant !== "ghost" && variant !== "link" && size !== "icon" && ( <> {/* Pixelated border */}

{variant !== "outline" && ( <> {/* Top shadow */}

{/* Bottom shadow */}

)} )} {size === "icon" && ( <>

)} ) : ( <> {children} {variant !== "ghost" && variant !== "link" && size !== "icon" && ( <> {/* Pixelated border */}

{variant !== "outline" && ( <> {/* Top shadow */}

{/* Bottom shadow */}

)} )} {size === "icon" && ( <>

)} )} ); } export { Button };

Installation

Files

components

Styles