diff --git a/src/components/Button/Button.css b/src/components/Button/Button.css
index a49ab434..2a7fbba0 100644
--- a/src/components/Button/Button.css
+++ b/src/components/Button/Button.css
@@ -1,13 +1,13 @@
 .sbui-btn-container {
-  @apply inline-flex;
+  @apply inline-flex font-medium;
 }
 
 .sbui-btn {
-  @apply font-medium rounded;
-  @apply relative cursor-pointer inline-flex space-x-2 text-center border border-solid border-transparent transition ease-out duration-200;
+  @apply relative cursor-pointer inline-flex items-center space-x-2 text-center border border-solid border-transparent transition ease-out duration-200;
+  @apply rounded;
   font-family: inherit;
+  font-weight: inherit;
   text-shadow: 0 -1px 0 rgba(0,0,0,.12);
-  -webkit-box-shadow: 0 2px 0 rgba(0,0,0,.045);
 }
 
 .sbui-btn-container--shadow {
@@ -86,8 +86,15 @@
 }
 
 .sbui-btn-primary.sbui-btn--danger {
-  @apply bg-red-500 text-white
+  @apply bg-red-500 text-white;
+  @apply hover:bg-red-600 hover:border-red-600;
 }
+.sbui-btn-default.sbui-btn--danger, .sbui-btn-secondary.sbui-btn--danger, .sbui-btn-outline.sbui-btn--danger, .sbui-btn-dashed.sbui-btn--danger, .sbui-btn-link.sbui-btn--danger, .sbui-btn-text.sbui-btn--danger {
+  @apply hover:bg-red-600 hover:text-white hover:border-red-600;
+}
+ /* {
+  @apply hover:bg-red-600 hover:text-white hover:border-red-600;
+} */
 
 /* 
   Animation for icon
@@ -112,35 +119,3 @@
     transform: rotate(360deg);
   }
 }
-
-/* 
-  Puesdo classes
-*/
-
-.btn:focus {
-  @apply outline-none ring;
-}
-
-/* .sbui-btn-primary:hover svg {
-  @apply text-gray-500;
-}
-.sbui-btn-secondary:hover svg {
-  @apply text-gray-100;
-}
-.sbui-btn-default:hover svg {
-  @apply text-gray-300;
-}
-.sbui-btn-outline:hover svg {
-  @apply text-white;
-}
-.sbui-btn-ghost:hover svg {
-  @apply bg-brand-300;
-} */
-
-.sbui-btn--with-icon {
-  /* @apply pl-10; */
-}
-
-.sbui-btn-icon-container {
-  @apply inset-y-0 flex items-center pointer-events-none;
-}
diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js
deleted file mode 100644
index 3957d0cc..00000000
--- a/src/components/Button/Button.js
+++ /dev/null
@@ -1,109 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import './Button.css'
-import { Transition, Icon } from '../../index'
-
-export const SIZES = ['tiny', 'small', 'medium', 'large', 'xlarge']
-export const VARIANTS = ['primary', 'default', 'secondary', 'outline', 'dashed', 'link', 'text']
-
-const Button = ({
-  block,
-  className,
-  children,
-  disabled = false,
-  onClick,
-  icon = undefined,
-  loading = false,
-  shadow = true,
-  size = 'medium',
-  style,
-  type = 'primary',
-  danger,
-  ...props
-}) => {
-  // default classes
-  let classes = []
-  let containerClasses = ['sbui-btn-container']
-
-  if (type !== 'ghost' && shadow) {
-    containerClasses.push('sbui-btn--shadow')
-  }
-
-  if (block) {
-    containerClasses.push('sbui-btn--w-full')
-    classes.push('sbui-btn--w-full')
-  }
-
-  if (icon) {
-    classes.push('sbui-btn--with-icon')
-  }
-
-  if (danger ) {
-    classes.push('sbui-btn--danger')
-  }
-
-  if (size) {
-    let sizeClasses = {
-      tiny: 'sbui-btn--tiny',
-      small: 'sbui-btn--small',
-      medium: 'sbui-btn--medium',
-      large: 'sbui-btn--large',
-      xlarge: 'sbui-btn--xlarge',
-    }
-    classes.push(sizeClasses[size])
-  }
-
-  classes.push(`sbui-btn-${type}`)
-
-  return (
-    <React.Fragment>
-      <span className={containerClasses.join(' ')}>
-        <button
-          {...props}
-          className={`sbui-btn ${classes.join(' ')} ${classes.join(
-            ' '
-          )} ${className}`}
-          disabled={loading || (disabled && true)}
-          onClick={onClick}
-          style={style}
-          type="button"
-        >
-          <Transition
-            show={loading || icon ? true : false}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            enterTo="opacity-100 translate-y-0 sm:scale-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-            leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-          >
-            {loading ? (
-              <Icon
-                size={21}
-                className={'sbui-btn--anim--spin'}
-                type={'Loader'}
-              />
-            ) : icon ? (
-              <div className="sbui-btn-icon-container">{icon}</div>
-            ) : null}
-          </Transition>
-          {children && <span>{children}</span>}
-        </button>
-      </span>
-    </React.Fragment>
-  )
-}
-
-Button.propTypes = {
-  size: PropTypes.oneOf(SIZES),
-  type: PropTypes.oneOf(VARIANTS),
-  block: PropTypes.bool,
-  shadow: PropTypes.bool,
-  className: PropTypes.string,
-  loading: PropTypes.bool,
-  disabled: PropTypes.bool,
-  icon: PropTypes.string,
-  danger: PropTypes.bool
-}
-
-export default Button
diff --git a/src/components/Button/Button.stories.js b/src/components/Button/Button.stories.js
deleted file mode 100644
index ef482ef5..00000000
--- a/src/components/Button/Button.stories.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react'
-
-import { Button } from '.'
-import { Icon } from '../Icon'
-
-export default {
-  title: 'General/Button',
-  component: Button,
-}
-
-export const Default = (args) => <Button {...args}>Button text</Button>
-export const withStyles = (args) => <Button {...args}>Button text</Button>
-export const withIcon = (args) => <Button {...args}>Button text</Button>
-export const withBlock = (args) => <Button {...args}>Button text</Button>
-export const withOnlyIcon = (args) => <Button {...args}/>
-export const withOnlyLoading = (args) => <Button {...args}/>
-
-const icon = <Icon type={"Package"}/>
-
-withIcon.args = {
-  type: 'primary',
-  icon: icon,
-  // style: {backgroundColor: 'red'}
-}
-
-withStyles.args = {
-  type: 'primary',
-  style: {backgroundColor: 'red', color: 'yellow'}
-}
-
-withBlock.args = {
-  type: 'primary',
-  block: true
-}
-
-withOnlyIcon.args = {
-  icon: icon
-}
-
-withOnlyLoading.args = {
-  loading: true
-}
\ No newline at end of file
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
new file mode 100644
index 00000000..e4b9dcce
--- /dev/null
+++ b/src/components/Button/Button.stories.tsx
@@ -0,0 +1,47 @@
+import React from 'react'
+
+import { Button } from '.'
+import { Icon } from '../Icon'
+
+export default {
+  title: 'General/Button',
+  component: Button,
+}
+
+export const Default = (args: any) => <Button {...args}>Button text</Button>
+export const withStyles = (args: any) => <Button {...args}>Button text</Button>
+export const withIcon = (args: any) => <Button {...args}>Button text</Button>
+export const withIconRight = (args: any) => <Button {...args}>Button text</Button>
+export const withBlock = (args: any) => <Button {...args}>Button text</Button>
+export const withOnlyIcon = (args: any) => <Button {...args}/>
+export const withOnlyLoading = (args: any) => <Button {...args}/>
+
+const icon = <Icon type={"Package"}/>
+
+withIcon.args = {
+  type: 'primary',
+  icon: icon,
+}
+
+withIconRight.args = {
+  type: 'primary',
+  iconRight: <Icon type={"ChevronRight"} strokeWidth={2}/>,
+}
+
+withStyles.args = {
+  type: 'primary',
+  style: {backgroundColor: 'red', color: 'yellow'}
+}
+
+withBlock.args = {
+  type: 'primary',
+  block: true
+}
+
+withOnlyIcon.args = {
+  icon: icon
+}
+
+withOnlyLoading.args = {
+  loading: true
+}
\ No newline at end of file
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
new file mode 100644
index 00000000..6d8760d9
--- /dev/null
+++ b/src/components/Button/Button.tsx
@@ -0,0 +1,108 @@
+import React from 'react'
+import PropTypes, { bool } from 'prop-types'
+import './Button.css'
+// @ts-ignore
+import { Transition, Icon } from '../../index'
+import { IconContext } from '../Icon/IconContext'
+
+interface Props {
+  block: boolean
+  className: any
+  children: React.ReactNode
+  disabled: boolean
+  onClick?: React.MouseEventHandler<HTMLButtonElement>
+  icon?: React.ReactNode
+  iconRight?: React.ReactNode
+  loading?: boolean
+  shadow?: boolean
+  size?: 'tiny' | 'small' | 'medium' | 'large' | 'xlarge'
+  style?: React.CSSProperties
+  type?:
+    | 'primary'
+    | 'default'
+    | 'secondary'
+    | 'outline'
+    | 'dashed'
+    | 'link'
+    | 'text'
+  danger: boolean
+  spaceSize: number
+}
+
+const Button = ({
+  block,
+  className,
+  children,
+  disabled = false,
+  onClick,
+  icon,
+  iconRight,
+  loading = false,
+  shadow = true,
+  size = 'medium',
+  style,
+  type = 'primary',
+  danger,
+  spaceSize,
+}: Props) => {
+  let classes = []
+  let containerClasses = ['sbui-btn-container']
+
+  if (block) {
+    containerClasses.push('sbui-btn--w-full')
+    classes.push('sbui-btn--w-full')
+  }
+
+  if (danger) {
+    classes.push('sbui-btn--danger')
+  }
+
+  if (shadow) {
+    classes.push('sbui-btn-container--shadow')
+  }
+
+  if (size) {
+    classes.push(`sbui-btn--${size}`)
+  }
+
+  classes.push(`sbui-btn-${type}`)
+
+  const showIcon = loading || icon
+
+  return (
+    <React.Fragment>
+      <span className={containerClasses.join(' ')}>
+        <button
+          className={`sbui-btn ${classes.join(' ')} ${classes.join(
+            ' '
+          )} ${className}`}
+          disabled={loading || (disabled && true)}
+          onClick={onClick}
+          style={style}
+          type="button"
+        >
+          {showIcon &&
+            (loading ? (
+              <Icon
+                size={size}
+                className={'sbui-btn--anim--spin'}
+                type={'Loader'}
+              />
+            ) : icon ? (
+              <IconContext.Provider value={{ contextSize: size }}>
+                {icon}
+              </IconContext.Provider>
+            ) : null)}
+          {children && <span>{children}</span>}
+          {iconRight && !loading && (
+            <IconContext.Provider value={{ contextSize: size }}>
+              {iconRight}
+            </IconContext.Provider>
+          )}
+        </button>
+      </span>
+    </React.Fragment>
+  )
+}
+
+export default Button
diff --git a/src/components/Button/index.js b/src/components/Button/index.tsx
similarity index 100%
rename from src/components/Button/index.js
rename to src/components/Button/index.tsx
diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
index 01a2f950..12280a45 100644
--- a/src/components/Icon/Icon.tsx
+++ b/src/components/Icon/Icon.tsx
@@ -1,33 +1,67 @@
 import React from 'react'
 import * as Icons from 'react-feather'
+import { IconContext } from './IconContext'
 
 interface Props {
   className?: string
-  size?: number,
-  type?: string,
-  color?: string,
-  strokeWidth?: number,
+  size?: 'tiny' | 'small' | 'medium' | 'large' | 'xlarge' | number
+  type?: string
+  color?: string
+  strokeWidth?: number
 }
 
-function Icon({
-  className,
-  size = 21,
-  type,
-  color,
-  strokeWidth,
-  ...props
-}: Props) {
-  // @ts-ignore
-  const FeatherIcon = Icons[type]
+interface StringMap {
+  [key: string]: number
+}
 
+function Icon({ className, size, type, color, strokeWidth, ...props }: Props) {
   return (
-    <FeatherIcon
-      color={color ? color : 'currentColor'}
-      className={`${className}`}
-      strokeWidth={strokeWidth}
-      size={size}
-      {...props}
-    />
+    <IconContext.Consumer>
+      {({ contextSize }) => {
+        const defaultSizes: StringMap = {
+          tiny: 14,
+          small: 18,
+          medium: 20,
+          large: 20,
+          xlarge: 24,
+        }
+
+        const defaultSize = defaultSizes['large']
+        // @ts-ignore
+        const FeatherIcon = Icons[type]
+
+        // const iconSize = typeof size === 'string' ? defaultSizes[contextSize] : 21
+        let iconSize: any = 21
+      
+        // use contextSize of parent (via context hook) if one exists
+        if (contextSize) {
+          iconSize = contextSize
+            ? typeof contextSize === 'string'
+              ? defaultSizes[contextSize]
+              : contextSize
+            : defaultSize
+        }
+
+        // use size prop of this component if one exists
+        if (size) {
+          iconSize = size
+            ? typeof size === 'string'
+              ? defaultSizes[size]
+              : size
+            : defaultSize
+        }
+
+        return (
+          <FeatherIcon
+            color={color ? color : 'currentColor'}
+            className={`${className}`}
+            strokeWidth={strokeWidth}
+            size={iconSize}
+            {...props}
+          />
+        )
+      }}
+    </IconContext.Consumer>
   )
 }
 
diff --git a/src/components/Icon/IconContext.tsx b/src/components/Icon/IconContext.tsx
new file mode 100644
index 00000000..77d4cc25
--- /dev/null
+++ b/src/components/Icon/IconContext.tsx
@@ -0,0 +1,7 @@
+import { createContext } from 'react'
+
+// Make sure the shape of the default value passed to
+// createContext matches the shape that the consumers expect!
+export const IconContext = createContext({
+  contextSize: '',
+})
diff --git a/src/components/Space/Space.tsx b/src/components/Space/Space.tsx
index ea527e2a..0005afe8 100644
--- a/src/components/Space/Space.tsx
+++ b/src/components/Space/Space.tsx
@@ -1,8 +1,7 @@
 import React from 'react'
 import './Space.css'
 
-function Space (props: any) {
-  const { direction, size, className, block, style, minus } = props
+function Space ({direction, size = 2, className, block, style, minus, children}: any) {
 
   const classes = []
   classes.push(direction === 'vertical' ? 'sbui-space-col' : 'sbui-space-row')
@@ -16,7 +15,7 @@ function Space (props: any) {
 
   return (
     <div className={classes.join(' ')} style={style}>
-      {props.children}
+      {children}
     </div>
   )
 }