You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
45 lines
1.2 KiB
45 lines
1.2 KiB
"use client"; |
|
|
|
import { ButtonHTMLAttributes, forwardRef } from "react"; |
|
|
|
export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger"; |
|
export type ButtonSize = "sm" | "md" | "lg"; |
|
|
|
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> { |
|
variant?: ButtonVariant; |
|
size?: ButtonSize; |
|
loading?: boolean; |
|
} |
|
|
|
export const Button = forwardRef<HTMLButtonElement, ButtonProps>( |
|
function Button( |
|
{ variant = "primary", size = "md", loading = false, disabled, children, className = "", ...props }, |
|
ref |
|
) { |
|
const isDisabled = disabled || loading; |
|
return ( |
|
<button |
|
ref={ref} |
|
disabled={isDisabled} |
|
className={`bb-btn bb-btn-${size} bb-btn-${variant} ${className}`.trim()} |
|
{...props} |
|
> |
|
{loading && ( |
|
<span |
|
style={{ |
|
width: 13, |
|
height: 13, |
|
border: "2px solid currentColor", |
|
borderTopColor: "transparent", |
|
borderRadius: "50%", |
|
display: "inline-block", |
|
animation: "bb-spin 0.65s linear infinite", |
|
flexShrink: 0, |
|
}} |
|
/> |
|
)} |
|
{children} |
|
</button> |
|
); |
|
} |
|
);
|
|
|