https://workpay-brand.netlify.app/_next/static/chunks/pages/button-3c87750f6e8f822ad448.js

1_N_E=(window.webpackJsonp_N_E=window.webpackJsonp_N_E||[]).push([[22],{"+I+c":function(e,t,n){"use strict";function r(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}n.d(t,"a",(function(){return r}))},"+hoB":function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return u}));var r=n("mK0O"),o=n("dV/x"),a=(n("mXGw"),n("/FXl"));function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){Object(r.a)(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var l={};function u(e){var t=e.components,n=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",c(c(c({},l),n),{},{components:t,mdxType:"MDXLayout"}),Object(a.b)("h1",c({},{id:"button"}),"Button"),Object(a.b)("p",null,"Button component is used to trigger an action or event, such as submitting a\nform, opening a ",Object(a.b)("a",c({parentName:"p"},{href:"/modal"}),"Dialog"),", canceling an action, or performing a delete\noperation."),Object(a.b)("blockquote",null,Object(a.b)("p",{parentName:"blockquote"},"This component extends the ",Object(a.b)("a",{href:"https://next.chakra-ui.com/docs/form/button/",target:"_blank",rel:"noopener noreferrer"},"Chakra UI Button"))),Object(a.b)("pre",null,Object(a.b)("code",c({parentName:"pre"},{className:"language-js"}),"import { Button, ButtonGroup, IconButton } from '@chakra-ui/react';\n")),Object(a.b)("ul",null,Object(a.b)("li",{parentName:"ul"},Object(a.b)("strong",{parentName:"li"},"Button:")," The button component with support for custom icons, spinners, etc."),Object(a.b)("li",{parentName:"ul"},Object(a.b)("strong",{parentName:"li"},"ButtonGroup:")," Used to group buttons whose actions are related, with an\noption to flush them together.")),Object(a.b)("h3",c({},{id:"button-variants"}),"Button variants"),Object(a.b)("p",null,"We use the ",Object(a.b)("inlineCode",{parentName:"p"},"variant")," prop to change the visual style of the Button. You can set\nthe value to ",Object(a.b)("inlineCode",{parentName:"p"},"solid"),", ",Object(a.b)("inlineCode",{parentName:"p"},"rounded"),", ",Object(a.b)("inlineCode",{parentName:"p"},"ghost"),", ",Object(a.b)("inlineCode",{parentName:"p"},"outline"),", or ",Object(a.b)("inlineCode",{parentName:"p"},"link"),"."),Object(a.b)("h4",c({},{id:"shapes"}),"Shapes"),Object(a.b)("pre",null,Object(a.b)("code",c({parentName:"pre"},{className:"language-jsx"}),"<Stack direction='row' spacing={4} align='center'>\n    <Button>Rounded Button</Button>\n    <Button variant='solid'>Semi Rounded</Button>\n    <Button variant='solid-sharp'>Sharp Button</Button>\n</Stack>\n")),Object(a.b)("h4",c({},{id:"solid-fill"}),"Solid Fill"),Object(a.b)("pre",null,Object(a.b)("code",c({parentName:"pre"},{className:"language-jsx"}),"<Stack direction='row' spacing={4} align='center'>\n    <Button>Run Payroll</Button>\n    <Button colorScheme='hue-chrome'>Run Payroll</Button>\n    <Button rightIcon={<BiTransfer />}>Run Payroll</Button>\n    <Button colorScheme='hue-chrome' rightIcon={<BiTransfer />}>\n        Run Payroll\n    </Button>\n    <IconButton icon={<BiTransfer />} isRound />\n    <IconButton colorScheme='hue-chrome' icon={<BiTransfer />} isRound />\n</Stack>\n")),Object(a.b)("h4",c({},{id:"outline"}),"Outline"),Object(a.b)("pre",null,Object(a.b)("code",c({parentName:"pre"},{className:"language-jsx"}),"<Stack direction='row' spacing={4} align='center'>\n    <Button variant='outline-rounded'>Run Payroll</Button>\n    <Button variant='outline-rounded' colorScheme='hue-chrome'>\n        Run Payroll\n    </Button>\n    <Button variant='outline-rounded' rightIcon={<BiTransfer />}>\n        Run Payroll\n    </Button>\n    <Button\n        variant='outline-rounded'\n        colorScheme='hue-chrome'\n        rightIcon={<BiTransfer />}\n    >\n        Run Payroll\n    </Button>\n    <IconButton variant='outline' icon={<BiTransfer />} isRound />\n    <IconButton\n        variant='outline'\n        colorScheme='hue-chrome'\n        icon={<BiTransfer />}\n        isRound\n    />\n</Stack>\n")),Object(a.b)("h4",c({},{id:"states"}),"States"),Object(a.b)("pre",null,Object(a.b)("code",c({parentName:"pre"},{className:"language-jsx"}),"<Stack direction='row' spacing={4} align='center'>\n    <Button>Normal Button</Button>\n    <Button isDisabled>Disabled Button</Button>\n    <Button isLoading colorScheme='hue-green' variant='solid'>\n        Email\n    </Button>\n    <Button\n        isLoading\n        loadingText='Submitting Button'\n        colorScheme='hue-green'\n        variant='outline'\n    >\n        Submitting\n    </Button>\n</Stack>\n")),Object(a.b)("h4",c({},{id:"grouping-buttons"}),"Grouping Buttons"),Object(a.b)("pre",null,Object(a.b)("code",c({parentName:"pre"},{className:"language-jsx"}),"<Stack direction='row' spacing={4} align='center'>\n    <ButtonGroup size='sm' isAttached variant='solid'>\n        <Button mr='-px'>Save</Button>\n        <IconButton\n            aria-label='Add to friends'\n            colorScheme='hue-chrome'\n            icon={<AddIcon />}\n        />\n    </ButtonGroup>\n    <ButtonGroup size='sm' isAttached variant='solid'>\n        <Button mr='-px'>Label</Button>\n        <Button mr='-px' colorScheme='hue-green' variant='outline'>\n            Another Label\n        </Button>\n        <Button mr='-px' colorScheme='hue-green' variant='outline'>\n            Label Ingine\n        </Button>\n    </ButtonGroup>\n</Stack>\n")),Object(a.b)("h2",c({},{id:"props"}),"Props"),Object(a.b)("p",null,"The Button extends the Chakra UI ",Object(a.b)("inlineCode",{parentName:"p"},"Button")," component so you can pass props for\n",Object(a.b)("inlineCode",{parentName:"p"},"Button"),". These are props related to the ",Object(a.b)("inlineCode",{parentName:"p"},"Workpay Button")," component."),Object(a.b)("table",null,Object(a.b)("thead",{parentName:"table"},Object(a.b)("tr",{parentName:"thead"},Object(a.b)("th",c({parentName:"tr"},{align:null}),"Name"),Object(a.b)("th",c({parentName:"tr"},{align:null}),"Type"),Object(a.b)("th",c({parentName:"tr"},{align:null}),"Default"),Object(a.b)("th",c({parentName:"tr"},{align:null}),"Description"))),Object(a.b)("tbody",{parentName:"table"},Object(a.b)("tr",{parentName:"tbody"},Object(a.b)("td",c({parentName:"tr"},{align:null}),Object(a.b)("inlineCode",{parentName:"td"},"variant")),Object(a.b)("td",c({parentName:"tr"},{align:null}),Object(a.b)("inlineCode",{parentName:"td"},"outline-rounded"),", ",Object(a.b)("inlineCode",{parentName:"td"},"solid-rounded"),", ",Object(a.b)("inlineCode",{parentName:"td"},"solid-sharp")),Object(a.b)("td",c({parentName:"tr"},{align:null}),Object(a.b)("inlineCode",{parentName:"td"},"solid-rounded")),Object(a.b)("td",c({parentName:"tr"},{align:null}

1),"The variant of the button style to use.")),Object(a.b)("tr",{parentName:"tbody"},Object(a.b)("td",c({parentName:"tr"},{align:null}),Object(a.b)("inlineCode",{parentName:"td"},"isDisabled")),Object(a.b)("td",c({parentName:"tr"},{align:null}),Object(a.b)("inlineCode",{parentName:"td"},"boolean")),Object(a.b)("td",c({parentName:"tr"},{align:null})),Object(a.b)("td",c({parentName:"tr"},{align:null}),"If ",Object(a.b)("inlineCode",{parentName:"td"},"true"),", the button will be disabled.")),Object(a.b)("tr",{parentName:"tbody"},Object(a.b)("td",c({parentName:"tr"},{align:null}),Object(a.b)("inlineCode",{parentName:"td"},"isLoading")),Object(a.b)("td",c({parentName:"tr"},{align:null}),Object(a.b)("inlineCode",{parentName:"td"},"boolean")),Object(a.b)("td",c({parentName:"tr"},{align:null})),Object(a.b)("td",c({parentName:"tr"},{align:null}),"If ",Object(a.b)("inlineCode",{parentName:"td"},"true"),", the button will show a spinner.")),Object(a.b)("tr",{parentName:"tbody"},Object(a.b)("td",c({parentName:"tr"},{align:null}),Object(a.b)("inlineCode",{parentName:"td"},"size")),Object(a.b)("td",c({parentName:"tr"},{align:null}),Object(a.b)("inlineCode",{parentName:"td"},"xs"),", ",Object(a.b)("inlineCode",{parentName:"td"},"sm"),", ",Object(a.b)("inlineCode",{parentName:"td"},"md"),", ",Object(a.b)("inlineCode",{parentName:"td"},"lg")),Object(a.b)("td",c({parentName:"tr"},{align:null}),Object(a.b)("inlineCode",{parentName:"td"},"md")),Object(a.b)("td",c({parentName:"tr"},{align:null}),"The size of the button.")))))}u.isMDXComponent=!0},"/FXl":function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return m}));var r=n("mXGw"),o=n.n(r);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var u=o.a.createContext({}),b=function(e){var t=o.a.useContext(u),n=t;return e&&(n="function"===typeof e?e(t):c(c({},t),e)),n},p=function(e){var t=b(e.components);return o.a.createElement(u.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},s=o.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,i=e.parentName,u=l(e,["components","mdxType","originalType","parentName"]),p=b(n),s=r,m=p["".concat(i,".").concat(s)]||p[s]||d[s]||a;return n?o.a.createElement(m,c(c({ref:t},u),{},{components:n})):o.a.createElement(m,c({ref:t},u))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"===typeof e||r){var a=n.length,i=new Array(a);i[0]=s;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"===typeof e?e:r,i[1]=c;for(var u=2;u<a;u++)i[u]=n[u];return o.a.createElement.apply(null,i)}return o.a.createElement.apply(null,n)}s.displayName="MDXCreateElement"},"dV/x":function(e,t,n){"use strict";n.d(t,"a",(function(){return o}));var r=n("+I+c");function o(e,t){if(null==e)return{};var n,o,a=Object(r.a)(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)n=i[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}},mK0O:function(e,t,n){"use strict";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}n.d(t,"a",(function(){return r}))},vdgT:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/button",function(){return n("+hoB")}])},x9yg:function(e,t,n){"use strict";var r=Object.assign.bind(Object);e.exports=r,e.exports.default=e.exports}},[["vdgT",0,1]]]);