update documentation

Author: mansona

addon/templates/components/es-button.hbs

@@ -1,5 +1,5 @@
 <button
-  class="es-button {{if @isLight "button-light"}} {{if @isTiny "button-tiny"}} {{if @isBlock "button-block"}}"
+  class={{if @secondary "es-button-secondary" "es-button"}}
   aria-label={{@label}}
   onclick={{action this.buttonClicked}}
   ...attributes

docs/components/button.md

@@ -5,22 +5,15 @@
 Simplest use case: a button with text in it, telling the user what to do.
 
 ```handlebars
-{{es-button label="click me"}}
+<EsButton @label="click me" />
 ```
 
-
 Also supported- block use:
 
 ```handlebars
-{{#es-button}}
+<EsButton>
   click me <span>🐹</span>
-{{/es-button}}
-```
-
-To toggle the 'disabled' property, set 'isDisabled' to true
-
-```handlebars
-{{es-button label="click me" isDisabled=true}}
+</EsButton>
 ```
 
 To add interactivity you can pass an action to `onClicked`
@@ -33,37 +26,18 @@ To add interactivity you can pass an action to `onClicked`
 {{value}}
 ```
 
-## Styling Links
-It is also possible to style a link to look like a button using the `something` class
-
-```html
-<a href="https://emberjs.com" class="es-button">Go to Ember homepage</a>
-```
-
-## Styles
-
-Outline button style:
+## Secondary Buttons
 
 ```handlebars
-{{es-button label="click me" isDark=false}}
+<EsButton @label="click me" @secondary={{true}} />
 ```
 
-Smaller button:
-
-```handlebars
-{{es-button label="click me" isTiny=true}}
-```
-
-Less Padding:
-
-```handlebars
-{{es-button label="click me" isDark=true isDense=true}}
-```
-
-Full-width button:
+## Styling Links
+It is also possible to style a link to look like a button using the `something` class
 
-```handlebars
-{{es-button label="click me" isBlock=true}}
+```html
+<a href="https://emberjs.com" class="es-button">Go to Ember homepage</a>
+<a href="https://guides.emberjs.com" class="es-button-secondary">Go to the Guides</a>
 ```
 
 ## Accessibility
@@ -73,14 +47,7 @@ Since we're using the native HTML button element and requiring a label value to
 If you are going to put an icon in the button, then you will need to set an aria-label property on the button:
 
 ```handlebars
-{{#es-button  ariaLabel="Hamster Secrets" title="Hamster Secrets"}}
+<EsButton aria-label="Hamster Secrets" title="Hamster Secrets">
   🐹
-{{/es-button}}
+</EsButton>
 ```
-
-## Other Uses
-
-There are some other ways this component could be used:
-
-- as a link
-- as a toggle button (supports the aria-pressed attribute)