"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8658],{9847:function(t,n,e){e.r(n),e.d(n,{_frontmatter:function(){return u},default:function(){return i}});var a=e(31461),o=(e(2784),e(94099)),r=["components"],u={title:"Button"},s={_frontmatter:u};function i(t){var n=t.components,e=(0,a.Z)(t,r);return(0,o.kt)("wrapper",Object.assign({},s,e,{components:n,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"button"},"Button"),(0,o.kt)("p",null,"Primitive button component with variants"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-js"},"import { Button } from 'theme-ui'\n")),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-jsx",metastring:"live=true",live:"true"},"<Button mr={2}>Beep</Button>\n<Button variant='secondary'>Boop</Button>\n<Button ml={2} hidden>Hidden</Button>\n")),(0,o.kt)("h2",{id:"variants"},"Variants"),(0,o.kt)("p",null,"Button variants can be defined in the ",(0,o.kt)("inlineCode",{parentName:"p"},"theme.buttons")," object.\nThe Button component uses ",(0,o.kt)("inlineCode",{parentName:"p"},"theme.buttons.primary")," as its default variant style."),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-js"},"// example theme variants\n{\n  buttons: {\n    primary: {\n      color: 'background',\n      bg: 'primary',\n      '&:hover': {\n        bg: 'text',\n      }\n    },\n    secondary: {\n      color: 'background',\n      bg: 'secondary',\n    },\n  },\n}\n")))}i.isMDXComponent=!0}}]);
//# sourceMappingURL=component---src-pages-components-button-mdx-d63fb44182b5c3eca349.js.map