File size: 1,374 Bytes
9308228 46cb663 9308228 ca2b2b6 9308228 46cb663 9308228 46cb663 9308228 46cb663 9308228 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | import { forwardRef } from "react";
import { Link } from "react-router-dom";
import { Spinner } from "./Spinner";
import "./Button.css";
/**
* variant: "primary" | "secondary" | "ghost" | "danger" | "warning"
* size: "sm" | "md"
*/
export const Button = forwardRef(function Button(
{
children,
variant = "primary",
size = "md",
loading = false,
disabled = false,
icon = null,
type = "button",
className = "",
to = null,
...props
},
ref
) {
const classes = `dw-btn dw-btn--${variant} dw-btn--${size} ${className}`;
if (to && !disabled && !loading) {
return (
<Link ref={ref} to={to} className={classes} {...props}>
{icon && <span className="dw-btn__icon">{icon}</span>}
<span className="dw-btn__label">{children}</span>
</Link>
);
}
return (
<button
ref={ref}
type={type}
disabled={disabled || loading}
className={classes}
{...props}
>
{loading ? (
<Spinner size={size === "sm" ? 13 : 15} />
) : (
icon && <span className="dw-btn__icon">{icon}</span>
)}
<span className="dw-btn__label">{children}</span>
</button>
);
});
|