feat(Button): Add disabled and sizing to the Button docs.

docs/elements/buttons.md

@@ -1,3 +1,5 @@
+**The button CSS classes are deprecated and should not be used. Use the [Button](#button) component instead.**
+
 ## Overview
 
 ---

src/components/Button/Button.md

@@ -23,30 +23,37 @@ Specify the `variant` to create a button for secondary actions.
 <Button variant="secondary">Find out more</Button>
 ```
 
-## Placing buttons on solid colors
+## Sizes
+
+All buttons are inline, with a minimum width of 180px. They will occupy 100% width of their parent's at the small viewport
+and below. Resize your browser window to see this behaviour. 
+
+
+## Placing buttons on solid colours
 
 Use the `secondary` `invert` button on top of the solid TELUS purple.
 
 ```
 const PurpleBlock = require('./__docs__/PurpleBlock').default;
 
 <PurpleBlock>
-  <Button variant="secondary" invert>Go back</Button>
+  <Button variant="secondary" invert>Get started</Button>
 </PurpleBlock>
 ```
 
 ## Placing buttons on images
 
 Use the `outlined` variant when placing a button on top of an image, which will cause the image to show through. You can 
-also `invert` the color scheme.
+also `invert` the colour scheme.
 
-Use this variant with caution. There will be accessibility issues if the color contrast of the image and the button text is too low.
+Use this variant with caution. There will be accessibility issues if the colour contrast of the image and the button text 
+is too low, including the hover state.
 
 ```
 const Hero = require('./__docs__/Hero').default;
 
 <Hero>
-  <Button variant="outlined" invert>Go back</Button>
+  <Button variant="outlined" invert>Advanced solutions</Button>
 </Hero>
 ```