{{#freestyle-collection defaultKey="standard" as |collection|}}
  {{#collection.variant key="standard"}}
    {{#freestyle-usage 'buttons-standard' title='Standard Buttons'}}
      <div class="block">
        <a class="button">Button</a>
        <a class="button is-white">White</a>
        <a class="button is-light">Light</a>
        <a class="button is-dark">Dark</a>
        <a class="button is-black">Black</a>
        <a class="button is-link">Link</a>
      </div>
      <div class="block">
        <a class="button is-primary">Primary</a>
        <a class="button is-info">Info</a>
        <a class="button is-success">Success</a>
        <a class="button is-warning">Warning</a>
        <a class="button is-danger">Danger</a>
      </div>
    {{/freestyle-usage}}
  {{/collection.variant}}
  {{#collection.variant key="outlines"}}
    {{#freestyle-usage 'buttons-outlines' title='Outline Buttons'}}
      <div class="block">
        <a class="button is-outlined">Outlined</a>
        <a class="button is-primary is-outlined">Primary</a>
        <a class="button is-info is-outlined">Info</a>
        <a class="button is-success is-outlined">Success</a>
        <a class="button is-warning is-outlined">Warning</a>
        <a class="button is-danger is-outlined is-important">Danger</a>
      </div>
    {{/freestyle-usage}}
  {{/collection.variant}}
  {{#collection.variant key="hollow"}}
    {{#freestyle-usage 'buttons-hollow' title='Hollow Buttons'}}
      <div class="block" style="background:#25BA81; padding:30px">
        <a class="button is-primary is-inverted is-outlined">Primary</a>
        <a class="button is-info is-inverted is-outlined">Info</a>
        <a class="button is-success is-inverted is-outlined">Success</a>
        <a class="button is-warning is-inverted is-outlined">Warning</a>
        <a class="button is-danger is-inverted is-outlined">Danger</a>
      </div>
    {{/freestyle-usage}}
  {{/collection.variant}}
  {{#collection.variant key="sizing"}}
    {{#freestyle-usage 'buttons-sizing' title='Button Sizes'}}
      <div class="block">
        <a class="button is-small">Small</a>
        <a class="button">Normal</a>
        <a class="button is-medium">Medium</a>
        <a class="button is-large">Large</a>
      </div>
    {{/freestyle-usage}}
  {{/collection.variant}}
{{/freestyle-collection}}

Move button styleguide material to a component
Move button styleguide material to a component
