39 lines
948 B
TypeScript
39 lines
948 B
TypeScript
import type { ButtonHTMLAttributes } from "react";
|
|
import { IconGlyph } from "./IconGlyph";
|
|
|
|
export interface ButtonProps
|
|
extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
|
|
label: string;
|
|
variant?: "primary" | "secondary" | "danger" | "ghost";
|
|
size?: "default" | "compact";
|
|
icon?: string;
|
|
loading?: boolean;
|
|
type?: "button" | "submit" | "reset";
|
|
}
|
|
|
|
export function Button({
|
|
label,
|
|
variant = "primary",
|
|
size = "default",
|
|
icon,
|
|
disabled = false,
|
|
loading = false,
|
|
type = "button",
|
|
className = "",
|
|
...buttonProps
|
|
}: ButtonProps) {
|
|
return (
|
|
<button
|
|
{...buttonProps}
|
|
className={className ? `ui-button ${className} ` : "ui-button "}
|
|
data-variant={variant}
|
|
data-size={size}
|
|
data-loading={loading}
|
|
disabled={disabled}
|
|
type={type}
|
|
>
|
|
{icon ? <IconGlyph name={icon} size="sm" /> : null}
|
|
<span>{loading ? "Loading" : label}</span>
|
|
</button>
|
|
);
|
|
}
|