Button.tsx

import * as React from 'react';

import './styles.css';

export interface ButtonProps {
  text: string;
  disabled?: boolean;
  onClick?: (event: any) => void;
}

export const Button: React.SFC<ButtonProps> = ({ text, disabled = false, onClick }) => {
  return (
    <button className="button" onClick={onClick} disabled={disabled}>
      {text}
    </button>
  );
};

styles.css

@import "../variables.css";

.button {
  background-color: var(--accentColor);
  border: 0;
  border-radius: 6px;
  color: var(--lightTextColor);
  cursor: pointer;
  font: var(--baseFont);
  font-size: var(--subTitleTextSize);
  font-weight: var(--subTitleFontWeight);
  line-height: calc(var(--rowHeight) * 2);
  margin: var(--rowHeight) var(--columnWidth);
  min-width: calc(var(--columnWidth) * 3);
  padding: 0 var(--rowHeight);
  transition: all 0.4s ease 0s;

  &:focus {
    outline: none;
  }

  &:active {
    background-color: color(var(--accentColor) tint(30%));
  }

  &:disabled {
    background-color: var(--disabledColor);
  }
}