| // Button — variants: primary | ghost | danger (default neutral). Sizes: sm | lg. | |
| export default function Button({ | |
| variant = "neutral", | |
| size, | |
| block, | |
| loading = false, | |
| children, | |
| className = "", | |
| disabled, | |
| ...rest | |
| }) { | |
| const classes = [ | |
| "btn", | |
| variant === "primary" && "btn--primary", | |
| variant === "ghost" && "btn--ghost", | |
| variant === "danger" && "btn--danger", | |
| size === "sm" && "btn--sm", | |
| size === "lg" && "btn--lg", | |
| block && "btn--block", | |
| className, | |
| ] | |
| .filter(Boolean) | |
| .join(" "); | |
| return ( | |
| <button className={classes} disabled={disabled || loading} {...rest}> | |
| {loading && <span className="spin" aria-hidden />} | |
| {children} | |
| </button> | |
| ); | |
| } | |