(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
Something went wrong. Try again.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677import React from "react";import { clsx } from "clsx";
type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";type ButtonSize = "sm" | "md" | "lg";
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { variant?: ButtonVariant; size?: ButtonSize; loading?: boolean; icon?: React.ReactNode; children?: React.ReactNode;}
const variants: Record<ButtonVariant, string> = { primary: "bg-primary-600 text-white hover:bg-primary-500 shadow-sm", secondary: "bg-surface-100 dark:bg-surface-800 text-surface-900 dark:text-white hover:bg-surface-200 dark:hover:bg-surface-700", ghost: "text-surface-600 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-800 hover:text-surface-900 dark:hover:text-white", danger: "bg-red-600 text-white hover:bg-red-500",};
const sizes: Record<ButtonSize, string> = { sm: "px-3 py-1.5 text-sm gap-1.5", md: "px-4 py-2 text-sm gap-2", lg: "px-6 py-3 text-base gap-2",};
export default function Button({ variant = "primary", size = "md", loading = false, icon, children, className, disabled, ...props}: ButtonProps) { return ( <button className={clsx( "inline-flex items-center justify-center font-medium rounded-lg transition-all duration-150", "focus:outline-none focus:ring-2 focus:ring-primary-500/20", "active:scale-[0.97] disabled:opacity-50 disabled:cursor-not-allowed", variants[variant], sizes[size], className, )} disabled={disabled || loading} {...props} > {loading ? ( <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24"> <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" /> <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" /> </svg> ) : ( icon )} {children && <span>{children}</span>} </button> );}