"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", em: "em", h2: "h2", h3: "h3", p: "p", pre: "pre", ...props.components }; return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: ["If you've used a component with style functions from the ", _jsx(_components.a, { href: "https://styled-system.com", children: "styled-system" }), "\nlibrary you might want to bring the API to all your projects. If that's the case we'll walk through how\nto build a button component using Styled System."] }), "\n", _jsx(_components.p, { children: "In this tutorial we'll go over using a styled function, theming providers, and variants." }), "\n", _jsx(_components.p, { children: _jsx(_components.a, { href: "https://codesandbox.io/s/wql9613x4w", children: "See the CodeSandbox" }) }), "\n", _jsx(_components.h2, { id: "install-the-dependencies", children: _jsx(_components.a, { href: "#install-the-dependencies", children: "Install the dependencies" }) }), "\n", _jsx(_components.p, { children: "For this example we'll be using Emotion, but any CSS-in-JS library will work." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "yarn add styled-system @emotion/core @emotion/styled emotion-theming\n" }) }), "\n", _jsx(_components.p, { children: "Next, we create a basic styled button" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "import styled from '@emotion/styled'\n\nconst Button = styled('button')({})\n" }) }), "\n", _jsx(_components.p, { children: "And add some basic styles:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "const Button = styled('button')({\n appearance: 'button',\n border: 0,\n outline: 0\n})\n" }) }), "\n", _jsx(_components.h2, { id: "add-some-color", children: _jsx(_components.a, { href: "#add-some-color", children: "Add some color" }) }), "\n", _jsxs(_components.p, { children: ["Now that we have some styling it's time to introduce some color. We can do that using the ", _jsx(_components.code, { children: "color" }), "\nfunction from Styled System. We do this by passing it as another argument after the style object:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "import styled from '@emotion/styled'\nimport { color } from 'styled-system'\n\nconst Button = styled('button')(\n {\n appearance: 'button',\n border: 0,\n outline: 0\n },\n color\n)\n" }) }), "\n", _jsxs(_components.p, { children: ["This exposes to props to the Button component: ", _jsx(_components.code, { children: "color" }), " and ", _jsx(_components.code, { children: "backgroundColor" }), " so you can use the\ncomponent like so:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "\n" }) }), "\n", _jsxs(_components.p, { children: ["Then, if we want to add defaults we can use ", _jsx(_components.code, { children: "defaultProps" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "Button.defaultProps = {\n color: 'white',\n backgroundColor: 'blue'\n}\n" }) }), "\n", _jsx(_components.h2, { id: "use-a-theme", children: _jsx(_components.a, { href: "#use-a-theme", children: "Use a theme" }) }), "\n", _jsxs(_components.p, { children: ["Now that we're setting colors on the Button component we want to use a ThemeProvider to use\na globally defined theme for all components. We can achieve that with ", _jsx(_components.code, { children: "emotion-theming" }), " and\nthen wrapping the app. Styled System will ", _jsx(_components.em, { children: "automatically" }), " tie into the theme and return a value\nif it exists."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "import styled from '@emotion/styled'\nimport { ThemeProvider } from 'emotion-theming'\nimport { color } from 'styled-system'\n\nconst theme = {\n space: [0, 2, 4, 8, 16, 32],\n colors: {\n blue: '#07c',\n tomato: 'tomato',\n purple: 'purple'\n }\n}\n\nfunction Demo() {\n return (\n \n \n \n )\n}\n" }) }), "\n", _jsx(_components.h2, { id: "add-padding-and-font-size", children: _jsx(_components.a, { href: "#add-padding-and-font-size", children: "Add padding and font size" }) }), "\n", _jsxs(_components.p, { children: ["Similarly to ", _jsx(_components.code, { children: "color" }), ", we can add in ", _jsx(_components.code, { children: "space" }), " and ", _jsx(_components.code, { children: "fontSize" }), " to add more style props to the Button."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "import styled from '@emotion/styled'\nimport { ThemeProvider } from 'emotion-theming'\nimport { color, space, fontSize } from 'styled-system'\n\nconst Button = styled('button')(\n {\n appearance: 'button',\n border: 0,\n outline: 0\n },\n color,\n space,\n fontSize\n)\n\nButton.defaultProps = {\n color: 'white',\n backgroundColor: 'blue',\n px: 4,\n py: 3,\n fontSize: 2\n}\n\nconst theme = {\n space: [0, 2, 4, 8, 16, 32],\n fontSizes: [14, 16, 18, 24, 32],\n colors: {\n blue: '#07c',\n tomato: 'tomato',\n purple: 'purple'\n }\n}\n\nfunction Demo() {\n return (\n \n \n \n )\n}\n" }) }), "\n", _jsxs(_components.p, { children: ["Now the button can have ", _jsx(_components.code, { children: "padding" }), ", ", _jsx(_components.code, { children: "margin" }), ", and ", _jsx(_components.code, { children: "fontSize" }), " set."] }), "\n", _jsx(_components.h2, { id: "buttonstyle", children: _jsx(_components.a, { href: "#buttonstyle", children: "buttonStyle" }) }), "\n", _jsxs(_components.p, { children: ["For buttons it's common to have a need for a ", _jsx(_components.code, { children: "variant" }), " prop which can\ndetermine interrelated styles like color, box shadow, or anything else."] }), "\n", _jsxs(_components.p, { children: ["You can use a special ", _jsx(_components.code, { children: "buttonStyle" }), " key in your theme and then import the\n", _jsx(_components.code, { children: "buttonStyle" }), " function from styled-system."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "import styled from '@emotion/styled'\nimport { ThemeProvider } from 'emotion-theming'\nimport { buttonStyle, space, fontSize } from 'styled-system'\n\nconst Button = styled('button')(\n {\n appearance: 'button',\n border: 0,\n outline: 0\n },\n buttonStyle,\n space,\n fontSize\n)\n\nButton.defaultProps = {\n variant: 'primary',\n px: 4,\n py: 3,\n fontSize: 2\n}\n\nconst baseTheme = {\n space: [0, 2, 4, 8, 16, 32],\n fontSizes: [14, 16, 18, 24, 32],\n colors: {\n blue: '#07c',\n tomato: 'tomato',\n purple: 'purple'\n }\n}\n\nconst theme = {\n ...baseTheme,\n buttons: {\n primary: {\n color: 'white',\n backgroundColor: baseTheme.colors.blue\n },\n secondary: {\n color: 'white',\n backgroundColor: baseTheme.colors.purple\n },\n danger: {\n color: 'white',\n backgroundColor: baseTheme.colors.tomato\n }\n }\n}\n" }) }), "\n", _jsxs(_components.p, { children: ["Now you can use ", _jsx(_components.code, { children: "primary" }), ", ", _jsx(_components.code, { children: "secondary" }), ", and ", _jsx(_components.code, { children: "danger" }), " variants in your Button\nlike so:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "\n" }) }), "\n", _jsx(_components.h2, { id: "custom-variants", children: _jsx(_components.a, { href: "#custom-variants", children: "Custom variants" }) }), "\n", _jsxs(_components.p, { children: ["You can specify any number of other style variants using the ", _jsx(_components.code, { children: "variant" }), " function.\nWith it you can specify custom keys in the theme object and even a custom prop.\nBelow is an example with a ", _jsx(_components.code, { children: "size" }), " variant for Button:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "import { buttonStyle, space, fontSize, variant } from 'styled-system'\n\nconst buttonSize = variant({\n prop: 'size',\n key: 'buttonSizes'\n})\n\nconst theme = {\n ...baseTheme,\n buttons: {\n primary: {\n color: 'white',\n backgroundColor: baseTheme.colors.blue\n },\n secondary: {\n color: 'white',\n backgroundColor: baseTheme.colors.purple\n },\n danger: {\n color: 'white',\n backgroundColor: baseTheme.colors.tomato\n }\n },\n buttonSizes: {\n medium: {\n fontSize: baseTheme.fontSizes[2],\n padding: `8px 16px`\n },\n large: {\n fontSize: baseTheme.fontSizes[4],\n padding: `16px 32px`\n }\n }\n}\n" }) }), "\n", _jsx(_components.p, { children: "Now you can change the button sizing like so:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "\n" }) }), "\n", _jsx(_components.h3, { id: "border-radius", children: _jsx(_components.a, { href: "#border-radius", children: "Border radius" }) }), "\n", _jsxs(_components.p, { children: ["If you want to add a border radius prop to your component you can first create\na ", _jsx(_components.code, { children: "radii" }), " key in your theme."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "const baseTheme = {\n space: [0, 2, 4, 8, 16, 32],\n fontSizes: [14, 16, 18, 24, 32],\n colors: {\n blue: '#07c',\n tomato: 'tomato',\n purple: 'purple'\n },\n radii: [0, 2, 4, 8]\n}\n" }) }), "\n", _jsxs(_components.p, { children: ["Then you can add import the ", _jsx(_components.code, { children: "borderRadius" }), " function from Styled System and\npass it to the Button component definition. You can also set a default so\nthat all buttons will take on the same border radius value."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "import {\n borderRadius,\n buttonStyle,\n space,\n fontSize,\n variant\n} from 'styled-system'\n\n// ...\n\nconst Button = styled('button')(\n {\n appearance: 'button',\n border: 0,\n outline: 0\n },\n borderRadius,\n buttonStyle,\n buttonSize,\n space,\n fontSize\n)\n\nButton.defaultProps = {\n borderRadius: 2\n}\n" }) }), "\n", _jsx(_components.h2, { id: "thats-not-all", children: _jsx(_components.a, { href: "#thats-not-all", children: "That's not all" }) }), "\n", _jsxs(_components.p, { children: ["Since Button uses the ", _jsx(_components.code, { children: "space" }), " function from Styled System you can set custom margin or\npadding. This is nice for adjacent buttons when you want to add a bit of margin on the\nleft of the second."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "\n\n" }) }), "\n", _jsx(_components.p, { children: "This is a great workflow for when you want to add spacing quickly and efficiently to a bit\nof markup. By default, it will ensure that design system scales will be used so that things\nremain consistent." }), "\n", _jsx(_components.h2, { id: "what-else", children: _jsx(_components.a, { href: "#what-else", children: "What else?" }) }), "\n", _jsxs(_components.p, { children: ["You can continue going further with other style functions for ", _jsx(_components.code, { children: "box-shadow" }), ", ", _jsx(_components.code, { children: "line-height" }), ",\nand more."] }), "\n", _jsx(_components.p, { children: _jsx(_components.a, { href: "https://styled-system.com/table", children: "See the Styled System table of functions" }) }), "\n", _jsx(_components.h2, { id: "conclusion", children: _jsx(_components.a, { href: "#conclusion", children: "Conclusion" }) }), "\n", _jsxs(_components.p, { children: ["Using this approach you can create components that can do essentially anything.\nEspecially with the ", _jsx(_components.code, { children: "variant" }), " prop you can create enums that map to groups of\nstyling which ensure a great developer experience."] }), "\n", _jsx(_components.p, { children: _jsx(_components.a, { href: "https://codesandbox.io/s/wql9613x4w", children: "See the CodeSandbox" }) })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = props.components || ({}); return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };

Building a beautiful, reusable button with Styled System