"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[1217],{52576:function(e,t,n){n.r(t),n.d(t,{_frontmatter:function(){return r},default:function(){return p}});var a=n(31461),o=(n(2784),n(94099)),s=["components"],r={title:"Close"},l={_frontmatter:r};function p(e){var t=e.components,n=(0,a.Z)(e,s);return(0,o.kt)("wrapper",Object.assign({},l,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"close"},"Close"),(0,o.kt)("p",null,"Button with close (×) icon."),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-js"},"import { Close } from 'theme-ui'\n")),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-jsx",metastring:"live=true",live:"true"},"<Close />\n")),(0,o.kt)("p",null,"The ",(0,o.kt)("inlineCode",{parentName:"p"},"Close")," component renders as a ",(0,o.kt)("inlineCode",{parentName:"p"},"<button>")," element by default. Pass any button attributes as props to the component."),(0,o.kt)("h2",{id:"variants"},"Variants"),(0,o.kt)("p",null,"Close component variants can be defined in the ",(0,o.kt)("inlineCode",{parentName:"p"},"theme.buttons")," object.\nThe Close component uses ",(0,o.kt)("inlineCode",{parentName:"p"},"theme.buttons.close")," 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    close: {\n      color: 'primary',\n    }\n  }\n}\n")))}p.isMDXComponent=!0}}]);
//# sourceMappingURL=component---src-pages-components-close-mdx-af5ac76601e42809f47b.js.map