{"componentChunkName":"component---src-templates-post-js","path":"/create-blue-block-button-react","result":{"data":{"markdownRemark":{"html":"

In this chapter we will build out a Secondary button Blue.

\n

In the buttons folder, create a BlueBlockButton.js component and add the following:

\n
import React from \"react\"\nimport PropTypes from \"prop-types\"\nimport styled, { keyframes } from \"styled-components\"\nimport loading from \"../../assets/loop.svg\"\n\nconst rotate = keyframes`\n  from {\n\t  transform: rotate(0deg);\n  }\n  to {\n\t  transform: rotate(360deg);\n  }\n`\nconst ImageStyles = styled.img`\n  display: inline-block;\n  animation: ${rotate} 2s infinite linear;\n`\n\nconst BlueBlockButton = ({\n  className = \"\",\n  onClick,\n  children,\n  disabled = false,\n  isLoading,\n  large,\n  long,\n  ...props\n}) => {\n  return (\n    <button\n      /* eslint-disable no-template-curly-in-string*/\n      className={`${className} cursor-pointer bg-blue-lightest text-blue-darkest focus:outline-none font-display rounded-px px-16 py-2 hover:bg-transparent hover:border hover:border-blue-darkest`}\n      onClick={onClick}\n      disabled={disabled}\n      {...props}\n    >\n      {isLoading ? <ImageStyles src={loading} alt=\"loading...\" /> : children}\n    </button>\n  )\n}\nconst propTypes = {\n  className: PropTypes.string,\n  onClick: PropTypes.func,\n  children: PropTypes.string,\n  disabled: PropTypes.bool,\n  large: PropTypes.bool,\n  long: PropTypes.bool,\n  isLoading: PropTypes.bool,\n}\nBlueBlockButton.propTypes = propTypes\nexport default BlueBlockButton
\n

Yet again we are doingg something simalr, only difference is that it is a different colour button.

\n

Once you're done it should look like this:

\n

\"blueoutline-component\"

","frontmatter":{"date":"July 16, 2020","path":"/create-blue-block-button-react","title":"Create Blue Block Button","postnumber":40}}},"pageContext":{"previous":{"node":{"frontmatter":{"path":"/create-remove-button-react","postnumber":41}}},"next":{"node":{"frontmatter":{"path":"/create-red-outline-button-react","postnumber":39}}}}},"staticQueryHashes":["3207677222","3649515864","63159454"]}