📝 Update Button docs

Author: exah

.internal/demo-theme.js

@@ -91,6 +91,14 @@ export const theme = {
     default: {
       background: 'royalblue',
       color: 'white'
+    },
+    danger: {
+      background: 'red',
+      color: 'white'
+    },
+    success: {
+      background: 'lime',
+      color: 'white'
     }
   },
   Input,

docs/button.mdx

@@ -41,12 +41,93 @@ import { Button } from 'pss-components'
 ### Change element
 
 <Playground>
-  <Button variant='auto' as='a' href='http://example.com' target='_blank'>
+  <Button variant='auto' as='a' href='http://example.com' target='_blank' role='button'>
     Button
   </Button>
 </Playground>
 
 
+### Default styles
+
+You can't change reset styles in `Button`, as in [Box](/box), but you can provide additional default styles for all buttons:
+
+```js
+import { css } from '@emotion/core'
+
+const myTheme = {
+  // All Buttons will have border-radius and padding
+  Button: css`
+    border-radius: 5px;
+    padding: 10px 20px;
+  `
+}
+```
+
+Please note that if you provide default style, you will not be able to change it with props, so I will recommend to create your own button instead:
+
+```js
+// /my/components/button.js
+import { Button as ButtonBase } from 'pss-components'
+
+const Button = (props) => (
+  <ButtonBase 
+    px='10px'
+    py='20px'
+    borderRadius={5}
+    {...props}
+  />
+)
+``` 
+
+### Variants
+
+You can add `Button` variants to theme for consistent usage:
+
+```js
+const myTheme = {
+  buttonStyle: {
+    default: {
+      background: 'royalblue',
+      color: 'white'
+    },
+    danger: {
+      background: 'red',
+      color: 'white'
+    },
+    success: {
+      background: 'lime',
+      color: 'white'
+    }
+  }
+}
+```
+
+<Playground>
+  <Button variant='default'>
+    Default
+  </Button>
+</Playground>
+
+Auto is same as `default`, but dynamic (see [ThemeDefaults](/theme-defaults))
+
+<Playground>
+  <Button variant='auto'>
+    Auto
+  </Button>
+</Playground>
+
+<Playground>
+  <Button variant='danger'>
+    Danger
+  </Button>
+</Playground>
+
+<Playground>
+  <Button variant='success'>
+    Success
+  </Button>
+</Playground>
+
 ## Props
 
 <PropsTable of={Button} />