How do I provide examples of a component?

[danieltian]

Is there any way to provide examples for a component? I have this button:

<button class="{{style}}">{{text}}</button>

There are several versions of this button that can be used:

{{ >button style="primary" text="Regular Blue Button" }}
{{ >button style="large primary" text="Large Blue Button" }}
{{ >button style="small secondary" text="Small Gray Button" }}
{{ >button style="highlighted primary" text="Blue Button with Extra Emphasis" }}

I'd like to provide examples of what each button looks like in the material. However, if I put it as part of the partial:

<button class="primary">Regular Blue Button</button>
<button class="large primary">Large Blue Button</button>
<button class="small secondary">Small Gray Button</button>
<button class="highlighted primary">Blue Button with Extra Emphasis</button>

Whenever I use the template:

{{ >button }}

It will list out all the example buttons. I could put it in the notes:

---
notes: |
  Examples of how this button can be used:

  <button class="primary">Regular Blue Button</button> `{{ >button style="primary" text="Regular Blue Button" }}`

  <button class="large primary">Large Blue Button</button> `{{ >button style="large primary" text="Large Blue Button" }}`

  <button class="small secondary">Small Gray Button</button> `{{ >button style="small secondary" text="Small Gray Button" }}`

  <button class="highlighted primary">Blue Button with Extra Emphasis</button> `{{ >button style="highlighted primary" text=Blue Button with Extra Emphasis" }}`
---

<button class="{{style}}">{{text}}</button>

But this will have the examples in the notes, and it will still have an extra <button> at the bottom displaying the actual Handlebars partial.

Is putting the examples in the notes the best way of showing usage examples/demos of a material, or is there a better way of doing this? Also, is it possible to hide the partial template at the bottom so that it's not shown at all on the materials pages, but still usable as a partial in other materials?

[emkajeej]

You could always use the {{#if fabricator}} statement. Everything in the {{#if}} block will then only show in the Overview rather than in the pages calling for button.

---
notes: |
  All variations of buttons. These can be called through the 'style' attribute, ie 'primary', 'large primary', 'highlighted primary', 'small secondary'.  
---

<button class="{{style}}">{{text}}</button>

{{#if fabricator}}
<button class="primary">Regular Blue Button</button>
<button class="large primary">Large Blue Button</button>
<button class="small secondary">Small Gray Button</button>
<button class="highlighted primary">Blue Button with Extra Emphasis</button> 
{{/if}}