src/components/button/index.tsx

import {ComponentChildren, JSX} from 'preact';
import cn from 'classnames';
import style from "./style.module.scss";

export function Button(props: {

    loading?: boolean;

    onClick?: () => void;

    className?: string;

    secondary?: boolean;

    disabled?: boolean;

    title?: string;

    children: ComponentChildren;

}) {
    const disabled = props.disabled || props.loading;
    const buttonClass = cn(style.btn, {[style.secondary]: props.secondary}, 'button', props.className, {[style.disabled]:disabled});

    let spinner: JSX.Element = undefined;

    if (props.loading) {
        spinner = <span className={style.spinner}/>
    }

    return (
        <button

            type="button"

            onClick={() => {

                if (!disabled) {

                    props.onClick()

                }

            }}

            className={buttonClass}

            disabled={disabled}

            title={props.title}

        >

            {spinner}

            {props.children}

        </button>
    );
}