{"id":195,"date":"2020-04-10T03:32:23","date_gmt":"2020-04-10T03:32:23","guid":{"rendered":"https:\/\/docs.theironnetwork.org\/hulk\/?page_id=195"},"modified":"2020-04-13T11:45:06","modified_gmt":"2020-04-13T11:45:06","slug":"buttons","status":"publish","type":"page","link":"https:\/\/docs.theironnetwork.org\/hulk\/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>&nbsp;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;Button variant=\"contained\" color=\"primary\"&gt;&nbsp;\n    Primary \n&lt;\/Button&gt;<\/pre>\n\n\n\n<p><strong>Step 2:<\/strong>&nbsp;Now Import the component from its parent library.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import Button from '@material-ui\/core\/Button';<\/pre>\n\n\n\n<p>We have given you an example of adding a raised button.<\/p>\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\u00a0<code>src->routes->UiComponents->Buttons->index.js<\/code>\u00a0file.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"573\" src=\"https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_143-1024x573.png\" alt=\"\" class=\"wp-image-338\" srcset=\"https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_143-1024x573.png 1024w, https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_143-300x168.png 300w, https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_143-768x430.png 768w, https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_143-1536x859.png 1536w, https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_143-1568x877.png 1568w, https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_143.png 1595w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"534\" src=\"https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_144-1024x534.png\" alt=\"\" class=\"wp-image-339\" srcset=\"https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_144-1024x534.png 1024w, https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_144-300x156.png 300w, https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_144-768x400.png 768w, https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_144-1536x801.png 1536w, https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_144.png 1542w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"234\" src=\"https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_145-1024x234.png\" alt=\"\" class=\"wp-image-341\" srcset=\"https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_145-1024x234.png 1024w, https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_145-300x69.png 300w, https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_145-768x176.png 768w, https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_145-1536x351.png 1536w, https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_145-1568x358.png 1568w, https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_145.png 1597w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\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:&nbsp;Please add the code given below in the page where you want to add the component. &lt;Button variant=&#8221;contained&#8221; color=&#8221;primary&#8221;&gt;&nbsp; Primary &lt;\/Button&gt; Step 2:&nbsp;Now Import the component from its parent library. import Button from &#8216;@material-ui\/core\/Button&#8217;; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":8,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/pages\/195"}],"collection":[{"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/comments?post=195"}],"version-history":[{"count":5,"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/pages\/195\/revisions"}],"predecessor-version":[{"id":346,"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/pages\/195\/revisions\/346"}],"wp:attachment":[{"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/media?parent=195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}