Skip to content
Snippets Groups Projects
Select Git revision
  • 5d82ff080a72cae48499f99374f1b576575becb0
  • main default protected
  • fix-textinput-label-styling
  • feature/add_tabs
  • v2.9.0
  • v2.8.0
  • v2.7.0
  • v2.6.0
  • v2.5.0
  • v2.4.0
  • v2.3.0
  • v2.2.0
  • v2.1.1
  • v2.1.0
  • v2.0.0
  • v1.10.0
  • v1.9.1
  • v1.9.0
  • v1.8.4
  • v1.8.3
  • v1.8.2
  • v1.8.1
  • v1.8.0
  • v1.7.0
24 results

Button.tsx

Blame
  • 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;