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

As we continue to build out these components we need a couple of buttons. So we will build our \"Primary Button\"

\n

In the components folder create a folder called buttons. Then create a RedBlockButton.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

🧁 Generally buttons have a spinner inside them to allow you to accept a signal that after you click on it that it is loading after making a call to an API or something. That is why we use StyledComponents and a basic CSS animation to get the icon to spin.

\n

🧁 Then we have a couple of Props and events passed into the button.

\n

🧁 Now we have a ternary operator to see if the isLoading prop is true, if so render the Loading spinner. If not render the children in the button.

\n

Once you're done it should look like this:

\n

\"redblock-component\"

\n

Now it is really easy to pull something out of Bootstrap or your fav library. However, I've found this a lot easier in cases when a designer has custom button button designs. It takes longer to find the necessary CSS class to override than to just write HTML and JavaScript to create things.

","frontmatter":{"date":"July 16, 2020","path":"/create-red-block-button-react","title":"Create Red Block Button","postnumber":38}}},"pageContext":{"previous":{"node":{"frontmatter":{"path":"/create-red-outline-button-react","postnumber":39}}},"next":{"node":{"frontmatter":{"path":"/create-typography-components-react","postnumber":37}}}}},"staticQueryHashes":["3207677222","3649515864","63159454"]}