How to use the react-foundation.Colors.PRIMARY function in react-foundation

return (
      <div>
        
          <div>
            <input value="{this.state.query}" placeholder="headphones, school laptop, toaster" type="text"> this.setState({ query: e.target.value })}
            /&gt;
            <div>
              <button color="{Colors.PRIMARY}" type="submit"> this.performSearch()}
              &gt;
                Search
              </button>
            </div>
          </div>
        
        
          {this.props.showFilters &amp;&amp;
            
              <label>Only Amazon Fulfilled
                </label></div>

const ProductLink = ({ slug, children }) => (
  
    <button color="{Colors.PRIMARY}"> {
        if (window.ga) {
          window.ga('send', 'event', {
            eventCategory: 'recommended',
            eventAction: 'click',
            eventLabel: slug
          })
        }
      }}
      isExpanded
    &gt;
      {children}
    </button>
  
)

};

    return (
      <div>
        <h2>React starter</h2>
        <div>
          <form>
            <label>
              Email
              <input required="" placeholder="name@example.com" type="email">
            </label>
            <label>
              Password
              <input required="" placeholder="******" type="password">
            </label>
            <button color="{Colors.PRIMARY}" type="submit">Log in</button>
          </form>
        </div>
      </div>
    );
  }
}