{"id":265,"date":"2019-10-04T05:46:12","date_gmt":"2019-10-04T05:46:12","guid":{"rendered":"https:\/\/docs.theironnetwork.org\/reactify\/?page_id=265"},"modified":"2019-10-10T08:21:16","modified_gmt":"2019-10-10T08:21:16","slug":"buttons","status":"publish","type":"page","link":"https:\/\/docs.theironnetwork.org\/reactify\/buttons\/","title":{"rendered":"Buttons"},"content":{"rendered":"\n<p>You can add the component on any page in the template. You need to follow the steps given below: \u200c<\/p>\n\n\n\n<p><strong>Step 1:<\/strong> Please add the code given below in the page where you want to add the component.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;MatButton variant=\"contained\" color=\"primary\" className=\"mr-10 mb-10 text-white\"> <br>    Primary<br>&lt;\/MatButton><br><\/pre>\n\n\n\n<p><strong>Step 2:<\/strong> Now Import the component from its parent library.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import MatButton from '@material-ui\/core\/Button';<\/pre>\n\n\n\n<p>We have given you an example of adding a raised button on the Ecommerce Dashboard.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" width=\"1024\" height=\"216\" src=\"https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/button-1024x216.png\" alt=\"\" class=\"wp-image-455\" srcset=\"https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/button-1024x216.png 1024w, https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/button-300x63.png 300w, https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/button-768x162.png 768w, https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/button.png 1310w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>You can check some other layouts of buttons below. For adding any of the below layout in the template, please check their relative code in the <code>src->routes->components->buttons->index.js<\/code> file. <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" width=\"1024\" height=\"409\" src=\"https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/btn1-1024x409.png\" alt=\"\" class=\"wp-image-456\" srcset=\"https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/btn1-1024x409.png 1024w, https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/btn1-300x120.png 300w, https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/btn1-768x307.png 768w, https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/btn1-1568x626.png 1568w, https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/btn1.png 1616w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" width=\"1024\" height=\"392\" src=\"https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/btn2-1024x392.png\" alt=\"\" class=\"wp-image-457\" srcset=\"https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/btn2-1024x392.png 1024w, https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/btn2-300x115.png 300w, https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/btn2-768x294.png 768w, https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/btn2-1568x600.png 1568w, https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/btn2.png 1619w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" width=\"1024\" height=\"422\" src=\"https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/btn-3-1024x422.png\" alt=\"\" class=\"wp-image-458\" srcset=\"https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/btn-3-1024x422.png 1024w, https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/btn-3-300x124.png 300w, https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/btn-3-768x316.png 768w, https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/btn-3-1568x646.png 1568w, https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/btn-3.png 1621w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<div class=\"pld-like-dislike-wrap pld-template-1\">\n    <div class=\"pld-like-wrap  pld-common-wrap\">\n    <a href=\"javascript:void(0);\" class=\"pld-like-trigger pld-like-dislike-trigger \" title=\"\" data-post-id=\"265\" data-trigger-type=\"like\" data-restriction=\"cookie\" data-ip-check=\"0\" data-user-check=\"1\">\n                        <i class=\"fas fa-thumbs-up\"><\/i>\n                    <\/a>\n    <span class=\"pld-like-count-wrap pld-count-wrap\">1    <\/span>\n<\/div><div class=\"pld-dislike-wrap  pld-common-wrap\">\n    <a href=\"javascript:void(0);\" class=\"pld-dislike-trigger pld-like-dislike-trigger \" title=\"\" data-post-id=\"265\" data-trigger-type=\"dislike\" data-ip-check=\"0\" data-restriction=\"cookie\" data-user-check=\"1\">\n                        <i class=\"fas fa-thumbs-down\"><\/i>\n                    <\/a>\n    <span class=\"pld-dislike-count-wrap pld-count-wrap\"><\/span>\n<\/div><\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>You can add the component on any page in the template. You need to follow the steps given below: \u200c Step 1: Please add the code given below in the page where you want to add the component. &lt;MatButton variant=&#8221;contained&#8221; color=&#8221;primary&#8221; className=&#8221;mr-10 mb-10 text-white&#8221;> Primary&lt;\/MatButton> Step 2: Now Import the component from its parent library. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":19,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages\/265"}],"collection":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/comments?post=265"}],"version-history":[{"count":2,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages\/265\/revisions"}],"predecessor-version":[{"id":459,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages\/265\/revisions\/459"}],"wp:attachment":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/media?parent=265"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}