Select Git revision

Alissa Cheng authored
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
Button.tsx 1.54 KiB
import { Button as NextButton } from "@nextui-org/react";
import { clsx } from "clsx";
import Icon, { IconName } from "./Icon.tsx";
import Typography from "./Typography.tsx";
import { ColorType } from "./utils/colors.ts";
import { bgColor, cursorPointer } from "./utils/classes.ts";
export type ButtonProps = {
label?: string | null;
color?: ColorType;
icon?: IconName | null;
iconClass?: string;
isDisabled?: boolean;
type?: "button" | "submit";
onClick?: () => void;
};
export const buttonBaseClass: string =
"px-[9px] h-[32px] min-w-fit max-w-fit py-[5px] text-baseWhite rounded-[4px] flex focus:!outline-0";
/**
* A simple button with optional icon
*
* @param label: string
* @param color: Color string
* @param icon: null | IconName
* @param disabled: boolean
*/
const Button = ({
label = null,
color = "primary",
icon = null,
iconClass,
isDisabled = false,
type = "button",
onClick = () => {},
}: ButtonProps) => {
if (!label && !icon) throw Error("Button cannot be empty");
const bgClass = (isDisabled: boolean) =>
isDisabled ? "bg-lightGrey !opacity-100" : bgColor(color);
return (
<NextButton
startContent={icon && <Icon name={icon} customClass={iconClass} />}
className={clsx(
bgClass(isDisabled),
cursorPointer(isDisabled),
buttonBaseClass
)}
isDisabled={isDisabled}
type={type}
onClick={onClick}
>
{label && (
<Typography text={label} variant="paragraph" customColor={true} />
)}
</NextButton>
);
};
export default Button;