A

webui/src/components/ui/Button.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { ButtonHTMLAttributes, ReactNode } from "react";
+import clsx from "clsx";
+import styles from "@/styles/Button.module.css";
+
+interface ButtonProps
+	extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
+	variant?:
+		| "primary"
+		| "success"
+		| "danger"
+		| "warning"
+		| "info"
+		| "light"
+		| "dark";
+	iconLeft?: string;
+	iconRight?: string;
+	loading?: boolean;
+	children: ReactNode;
+	tooltip?: string;
+	type?: "submit" | "reset" | "button";
+}
+
+export function Button({
+	variant = "primary",
+	iconLeft,
+	iconRight,
+	loading = false,
+	children,
+	className,
+	disabled,
+	tooltip,
+	type = "button",
+	...props
+}: ButtonProps) {
+	return (
+		<button
+			type={type}
+			className={clsx(
+				styles.button,
+				styles[`is-${variant}`],
+				loading && styles.isLoading,
+				className,
+			)}
+			disabled={disabled || loading}
+			title={tooltip}
+			{...props}
+		>
+			{iconLeft && !loading && <i className={`mdi mdi-${iconLeft}`} />}
+			{loading && <i className="mdi mdi-loading mdi-spin" />}
+			<span>{children}</span>
+			{iconRight && !loading && <i className={`mdi mdi-${iconRight}`} />}
+		</button>
+	);
+}