57 lines
1.1 KiB
TypeScript
57 lines
1.1 KiB
TypeScript
"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>
|
|
);
|
|
}
|