chore(docz-example-basic): improve example

examples/basic/src/components/Alert.jsx

@@ -20,11 +20,11 @@ const AlertStyled = styled('div')`
 const Alert = props => <AlertStyled {...props} />
 
 Alert.propTypes = {
-  color: t.oneOf(['info', 'positive', 'negative', 'warning']),
+  kind: t.oneOf(['info', 'positive', 'negative', 'warning']),
 }
 
 Alert.defaultProps = {
-  color: 'info',
+  kind: 'info',
 }
 
 export default Alert

examples/basic/src/components/Button.jsx

@@ -1,14 +1,54 @@
 import React from 'react'
+import styled from 'react-emotion'
 import t from 'prop-types'
 
-const Button = ({ children }) => <button>{children}</button>
+const scales = {
+  small: `
+    padding: 5px 10px;
+    font-size: 14px;
+  `,
+  normal: `
+    padding: 10px 20px;
+    font-size: 16px;
+  `,
+  big: `
+    padding: 20px 30px;
+    font-size: 18px;
+  `,
+}
+
+const kinds = {
+  primary: `
+    background: #1FB6FF;
+    color: white;
+  `,
+  secondary: `
+    background: #592DEA;
+    color: white;
+  `,
+}
+
+const ButtonStyled = styled('button')`
+  cursor: pointer;
+  margin: 3px 5px;
+  border: none;
+  border-radius: 3px;
+  ${({ scale = 'normal' }) => scales[scale]};
+  ${({ kind = 'info' }) => kinds[kind]};
+`
+
+const Button = ({ children, ...props }) => (
+  <ButtonStyled {...props}>{children}</ButtonStyled>
+)
 
 Button.propTypes = {
-  /**
-    Button element children
-  */
-  children: t.any,
-  color: t.string,
+  scales: t.oneOf(['small', 'normal', 'big']),
+  kind: t.oneOf(['primary', 'secondary']),
+}
+
+Button.defaultProps = {
+  scales: 'normal',
+  kind: 'primary',
 }
 
 export default Button

examples/basic/src/components/Button.mdx

@@ -22,3 +22,11 @@ Buttons make common actions more obvious and help users more easily perform them
 <Playground>
   <Button>Click me</Button>
 </Playground>
+
+## With different sizes
+
+<Playground>
+  <Button scale="small">Click me</Button>
+  <Button scale="normal">Click me</Button>
+  <Button scale="big">Click me</Button>
+</Playground