✨ Add Button component

Author: exah

.internal/theme.js

@@ -8,6 +8,11 @@ const Link = css`
   }
 `
 
+const Button = css`
+  border-radius: 5px;
+  padding: 10px 20px;
+`
+
 const theme = {
   media: {
     sm: '(max-width: 600px)',
@@ -67,7 +72,14 @@ const theme = {
       fontWeight: 'bold'
     }
   },
-  Link
+  Link,
+  Button,
+  buttonVariant: {
+    default: {
+      background: 'royalblue',
+      color: 'white'
+    }
+  }
 }
 
 const themeWithRems = {

docs/button.mdx

@@ -0,0 +1,45 @@
+---
+name: Button
+route: /button
+menu: Primitives
+---
+
+import { Playground } from 'docz'
+import { ThemeProvider } from 'emotion-theming'
+import { PropsTable } from '../.internal/props-table'
+import { theme } from '../.internal/theme'
+import { Button, Link } from '../src'
+
+# Button
+
+## Description
+
+Based on [Box](/box). Renders `<button>` element.
+
+
+## Usage
+
+```js
+import { Button } from 'pss-components'
+```
+
+<Playground>
+  <Button>Button</Button>
+  <Button variant='auto'>Button</Button>
+  <Button bg='red' ml={1}>Button</Button>
+</Playground>
+
+## Examples
+
+### Change element
+
+<Playground>
+  <Button variant='auto' use='a' href='http://example.com' target='_blank'>
+    Button
+  </Button>
+</Playground>
+
+
+## Props
+
+<PropsTable of={Button} />

src/button.js

@@ -0,0 +1,38 @@
+import styled from '@emotion/styled'
+import { themePath, variant } from 'pss'
+import { Box } from './box'
+
+const buttonVariant = variant({
+  themeKey: 'buttonVariant'
+})
+
+const Button = styled(Box)(
+  {
+    appearance: 'none',
+    textAlign: 'center',
+    textDecoration: 'none',
+    cursor: 'pointer',
+    '&[disabled]': {
+      cursor: 'auto',
+      pointerEvents: 'none'
+    }
+  },
+  themePath('Button'),
+  buttonVariant
+)
+
+Button.displayName = 'Button'
+
+Button.propTypes = {
+  ...buttonVariant.propTypes,
+  ...Box.propTypes
+}
+
+Button.defaultProps = {
+  element: 'button',
+  display: 'inline-block'
+}
+
+export {
+  Button
+}

src/index.js

@@ -1,4 +1,5 @@
 export { Box } from './box'
+export { Button } from './button'
 export { Feed } from './feed'
 export { Flex } from './flex'
 export { FlexGrid } from './flex-grid'