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

In this chapter we will build out our components that we will be using through out the application. First lets go ahead and create a Remove button.

\n

In the components folder create a folder called buttons. Then create a RemoveButton.js component and add the following:

\n
import React from \"react\"\nimport PropTypes from \"prop-types\"\nimport remove from \"../../assets/remove.svg\"\n\nconst RemoveButton = ({\n  className = \"\",\n  onClick,\n  text,\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} bg-white cursor-pointer text-red-darkest focus:outline-none font-display  px-16 py-2 cursor:pointer`}\n      onClick={onClick}\n      disabled={disabled}\n      {...props}\n    >\n      <div className=\"flex flex-row\">\n        <img src={remove} alt=\"remove\" />\n        <p className=\"text-sm font-display text-bold ml-3 mt-3\">Remove</p>\n      </div>\n    </button>\n  )\n}\nconst propTypes = {\n  className: PropTypes.string,\n  onClick: PropTypes.func,\n  text: PropTypes.string,\n  disabled: PropTypes.bool,\n  large: PropTypes.bool,\n  long: PropTypes.bool,\n  isLoading: PropTypes.bool,\n}\nRemoveButton.propTypes = propTypes\nexport default RemoveButton
\n

🧁 This button has an icon that will allow us to remove items in forms that we want to be removed.

\n

Once you're done, it will look like this:

\n

\"remove-button\"

","frontmatter":{"date":"July 16, 2020","path":"/create-remove-button-react","title":"Create Remove Button","postnumber":41}}},"pageContext":{"previous":{"node":{"frontmatter":{"path":"/create-listing-card-react","postnumber":42}}},"next":{"node":{"frontmatter":{"path":"/create-blue-block-button-react","postnumber":40}}}}},"staticQueryHashes":["3207677222","3649515864","63159454"]}