diff --git a/config/jest.config.js b/config/jest.config.js
index 771f905544..33f4744cd4 100644
--- a/config/jest.config.js
+++ b/config/jest.config.js
@@ -2,7 +2,12 @@ const path = require('path')
 
 module.exports = {
   rootDir: path.resolve('src'),
-  roots: ['<rootDir>', path.resolve('docs/components'), path.resolve('packages')],
+  roots: [
+    '<rootDir>',
+    path.resolve('docs/components'),
+    path.resolve('packages'),
+    path.resolve('shared'),
+  ],
   moduleNameMapper: {
     '\\.modules.scss$': 'identity-obj-proxy',
     '^.+\\.(css|scss)$': '<rootDir>/__mocks__/styleMock.js',
diff --git a/config/styleguide.config.js b/config/styleguide.config.js
index 838d3e6a36..8711fcf00b 100644
--- a/config/styleguide.config.js
+++ b/config/styleguide.config.js
@@ -194,7 +194,7 @@ module.exports = {
           name: 'Forms',
           components() {
             return compact([
-              path.resolve('src/components/Button/Button.jsx'),
+              path.resolve('packages/Button/Button.jsx'),
               path.resolve('src/components/Input/Input.jsx'),
               path.resolve('src/components/Checkbox/Checkbox.jsx'),
               path.resolve('src/components/Radio/Radio.jsx'),
diff --git a/package.json b/package.json
index f215ec7688..b31497bee0 100644
--- a/package.json
+++ b/package.json
@@ -20,9 +20,9 @@
     "gitbook": "gitbook serve guide",
     "gitbook:install": "gitbook install guide",
     "lint:js":
-      "eslint packages src config docs scripts --ext '.js,.jsx' --config config/.eslintrc.json --max-warnings 0 --fix",
+      "eslint packages shared src config docs scripts --ext '.js,.jsx' --config config/.eslintrc.json --max-warnings 0 --fix",
     "lint:scss":
-      "stylelint '{src/components,packages}/**/*.scss' --config config/.stylelintrc.json",
+      "stylelint '{src/components,packages,shared}/**/*.scss' --config config/.stylelintrc.json",
     "lint:ec": "echint",
     "lint": "yarn lint:js && yarn lint:scss && yarn lint:ec",
     "packup": "yarn build-package && yarn pack",
diff --git a/src/components/Button/Button.jsx b/packages/Button/Button.jsx
similarity index 84%
rename from src/components/Button/Button.jsx
rename to packages/Button/Button.jsx
index 4bf15e7f17..48a0ed6c29 100644
--- a/src/components/Button/Button.jsx
+++ b/packages/Button/Button.jsx
@@ -1,10 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { warn } from '../../utils/warn'
-import safeRest from '../../utils/safeRest'
+import { warn } from '../../src/utils/warn'
+import safeRest from '../../src/utils/safeRest'
 
-import BaseButton from './BaseButton/BaseButton'
+import BaseButton from '../../shared/BaseButton/BaseButton'
 
 const preventDisabling = ({ disabled, ...props }) => {
   if (disabled) {
diff --git a/src/components/Button/Button.md b/packages/Button/Button.md
similarity index 92%
rename from src/components/Button/Button.md
rename to packages/Button/Button.md
index f3f8802a00..2ae0414e6d 100644
--- a/src/components/Button/Button.md
+++ b/packages/Button/Button.md
@@ -26,15 +26,14 @@ Specify the `variant` to create a button for secondary actions.
 
 ### Sizes
 
-All buttons are inline, with a minimum width of 180px for screens larger than 768px. They will occupy 100% width of their 
+All buttons are inline, with a minimum width of 180px for screens larger than 768px. They will occupy 100% width of their
 parent's width at the small viewport and below. Resize your browser window to see this behaviour.
 
-
 ### Placing buttons on dark backgrounds
 
 Use the `inverted` button on top of a dark background (TELUS approved colours or images).
 
-Use this variant with caution. There will be accessibility issues if the colour contrast of the image and the button 
+Use this variant with caution. There will be accessibility issues if the colour contrast of the image and the button
 text is too low in the hover state.
 
 ```jsx { "props": { "className": "docs_purple-block" } }
diff --git a/src/components/Button/__tests__/Button.spec.jsx b/packages/Button/__tests__/Button.spec.jsx
similarity index 92%
rename from src/components/Button/__tests__/Button.spec.jsx
rename to packages/Button/__tests__/Button.spec.jsx
index 954adcd7ac..49bc70b3be 100644
--- a/src/components/Button/__tests__/Button.spec.jsx
+++ b/packages/Button/__tests__/Button.spec.jsx
@@ -1,13 +1,13 @@
 import React from 'react'
 import { render, mount } from 'enzyme'
 
-import { warn } from '../../../utils/warn'
+import { warn } from '../../../src/utils/warn'
 
 import Button from '../Button'
 
-import mockMatchMedia from '../../../__mocks__/matchMedia'
+import mockMatchMedia from '../../../src/__mocks__/matchMedia'
 
-jest.mock('../../../utils/warn')
+jest.mock('../../../src/utils/warn')
 
 describe('Button', () => {
   const doMount = (overrides = {}) => {
diff --git a/src/components/Button/__tests__/Button.ssr.spec.jsx b/packages/Button/__tests__/Button.ssr.spec.jsx
similarity index 100%
rename from src/components/Button/__tests__/Button.ssr.spec.jsx
rename to packages/Button/__tests__/Button.ssr.spec.jsx
diff --git a/src/components/Button/__tests__/__snapshots__/Button.spec.jsx.snap b/packages/Button/__tests__/__snapshots__/Button.spec.jsx.snap
similarity index 100%
rename from src/components/Button/__tests__/__snapshots__/Button.spec.jsx.snap
rename to packages/Button/__tests__/__snapshots__/Button.spec.jsx.snap
diff --git a/src/components/Button/BaseButton/BaseButton.jsx b/shared/BaseButton/BaseButton.jsx
similarity index 83%
rename from src/components/Button/BaseButton/BaseButton.jsx
rename to shared/BaseButton/BaseButton.jsx
index 8a40563de2..c8590a6a80 100644
--- a/src/components/Button/BaseButton/BaseButton.jsx
+++ b/shared/BaseButton/BaseButton.jsx
@@ -1,11 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import safeRest from '../../../utils/safeRest'
-import joinClassNames from '../../../utils/joinClassNames'
+import safeRest from '../../src/utils/safeRest'
+import joinClassNames from '../../src/utils/joinClassNames'
 
-import FlexBox from '../../Flexbox/Flexbox'
-import Responsive from '../../Responsive/Responsive'
+import FlexBox from '../../src/components/Flexbox/Flexbox'
+import Responsive from '../../src/components/Responsive/Responsive'
 
 import styles from './BaseButton.modules.scss'
 
diff --git a/src/components/Button/BaseButton/BaseButton.modules.scss b/shared/BaseButton/BaseButton.modules.scss
similarity index 78%
rename from src/components/Button/BaseButton/BaseButton.modules.scss
rename to shared/BaseButton/BaseButton.modules.scss
index 5ac331d54e..107da5f667 100644
--- a/src/components/Button/BaseButton/BaseButton.modules.scss
+++ b/shared/BaseButton/BaseButton.modules.scss
@@ -1,5 +1,5 @@
-@import '../../../scss/settings/colours';
-@import '../../../scss/utility/responsive';
+@import '../../src/scss/settings/colours';
+@import '../../src/scss/utility/responsive';
 
 $primary-bg-color: $color-primary;
 $secondary-bg-color: $color-secondary;
@@ -12,9 +12,9 @@ $button-text-color: $color-white;
 }
 
 .base {
-  composes: none rounded from '../../Borders.modules.scss';
-  composes: medium boldFont from '../../Typography/Text/Text.modules.scss';
-  composes: height font from '../../Forms.modules.scss';
+  composes: none rounded from '../../src/components/Borders.modules.scss';
+  composes: medium boldFont from '../../src/components/Typography/Text/Text.modules.scss';
+  composes: height font from '../../src/components/Forms.modules.scss';
 
   margin: 0;
   padding: 0 2rem;
@@ -83,7 +83,7 @@ $button-text-color: $color-white;
 }
 
 .centered {
-  composes: rounded from '../../Borders.modules.scss';
+  composes: rounded from '../../src/components/Borders.modules.scss';
 
   width: 100%;
   height: 100%;
diff --git a/src/components/Link/ButtonLink/ButtonLink.jsx b/src/components/Link/ButtonLink/ButtonLink.jsx
index 9b43b75be7..dd8b6573b8 100644
--- a/src/components/Link/ButtonLink/ButtonLink.jsx
+++ b/src/components/Link/ButtonLink/ButtonLink.jsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import { warn } from '../../../utils/warn'
 import safeRest from '../../../utils/safeRest'
 
-import BaseButton from '../../Button/BaseButton/BaseButton'
+import BaseButton from '../../../../shared/BaseButton/BaseButton'
 
 import styles from './ButtonLink.modules.scss'
 
diff --git a/src/index.js b/src/index.js
index 2f4202f035..ad81143225 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,7 +2,7 @@ import './scss/global.scss'
 
 export { default as Accordion } from './components/ExpandCollapse/Accordion/Accordion'
 export { default as Box } from '../packages/Box/Box'
-export { default as Button } from './components/Button/Button'
+export { default as Button } from '../packages/Button/Button'
 export { default as ButtonLink } from './components/Link/ButtonLink/ButtonLink'
 export { default as Card } from './components/Card/Card'
 export { default as Checkbox } from './components/Checkbox/Checkbox'