Button Component

An example of a button component

by Aaron Fryer

TypeScript

import * as React from 'react';
import Bem from '../../utils/Bem';
import './styles.css';

const component = new Bem('c-button');

/**
 * Button Component used for buttons throughout the app
 * 
 * @param {string} className - provides additional classes for the button
 * @param {React.ReactNode} children - allows text or inline elements to passed inside
 * @param {boolean} disabled - sets the button to disabled
 * @param {any} onClick - specifies the onClick function
 * @param {string} [variant=standard] - optional parameter to specify what type of button it is. Values: standard, cancel, alternate, warning, basic
 * @param {string} [size=standard] - optional parameter to specify what size of button it is. Values: standard, small
 * @param {string} [type=button] - optional parameter to specify what type of button it is. button/submit
 * 
 */

interface ButtonProps {
  className?:string;
  children: React.ReactNode;
  disabled?: boolean;
  onClick: any;
  type?: string;
  size?: string;
  variant?: string;
}

function Button({ className, children, disabled, onClick, type = 'button', size = 'standard', variant = 'standard' }: ButtonProps) {
  return (
    <button
      disabled={disabled}
      className={`${component.with()} ${component.with('', {[variant]: true, [`size-${size}`]: !!size, [`${variant}-is-disabled`]: disabled})} ${!!className ? className: ''}`}
      onClick={onClick}
      type={type}
    >
      {children}
    </button>
  );
}

export default Button;