43 lines
1012 B
TypeScript
43 lines
1012 B
TypeScript
import type { ButtonHTMLAttributes, ReactNode } from "react";
|
|
|
|
export type AppButtonStyle = "filled" | "tinted" | "gray" | "plain" | "destructive";
|
|
export type AppButtonSize = "large" | "medium" | "small";
|
|
|
|
type Props = ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
label?: ReactNode;
|
|
children?: ReactNode;
|
|
buttonStyle?: AppButtonStyle;
|
|
size?: AppButtonSize;
|
|
expanded?: boolean;
|
|
loading?: boolean;
|
|
};
|
|
|
|
export function AppButton({
|
|
label,
|
|
children,
|
|
buttonStyle = "filled",
|
|
size = "large",
|
|
expanded = true,
|
|
loading = false,
|
|
className = "",
|
|
disabled,
|
|
type = "button",
|
|
...rest
|
|
}: Props) {
|
|
const classes = [
|
|
"app-btn",
|
|
`app-btn--${buttonStyle}`,
|
|
`app-btn--${size}`,
|
|
expanded ? "app-btn--expanded" : "",
|
|
className,
|
|
]
|
|
.filter(Boolean)
|
|
.join(" ");
|
|
|
|
return (
|
|
<button type={type} className={classes} disabled={disabled || loading} {...rest}>
|
|
{loading ? <span className="app-spinner" aria-hidden="true" /> : (label ?? children)}
|
|
</button>
|
|
);
|
|
}
|