<!-- Default -->
<button class="button button-icon icon-left ">
  <div>
    <svg width="16" height="16" class="icon icon-plus"><use xlink:href="/assets/svg/core.svg#plus" /></svg>
    <span>Submit</span>
  </div>
</button>

<!-- A Left -->
<a href="/foo" class="button button-icon  icon-left">
    <div>
        <svg width="10" height="10" class="icon icon-plus"><use xlink:href="/assets/svg/core.svg#plus" /></svg>
        <span>Submit</span>
    </div>
</a>

<!-- Button Right -->
<button class="button button-icon icon-right ">
  <div>
    <svg width="16" height="16" class="icon icon-plus"><use xlink:href="/assets/svg/core.svg#plus" /></svg>
    <span>Submit</span>
  </div>
</button>

<!-- A Right -->
<a href="/foo" class="button button-icon  icon-right">
    <div>
        <svg width="10" height="10" class="icon icon-plus"><use xlink:href="/assets/svg/core.svg#plus" /></svg>
        <span>Submit</span>
    </div>
</a>

<!-- Button Alert -->
<button class="button button-icon  icon-left action-alert">
  <div>
    <svg width="16" height="16" class="icon icon-plus"><use xlink:href="/assets/svg/core.svg#plus" /></svg>
    <span>Submit</span>
  </div>
</button>

<!-- A Alert -->
<a href="/foo" class="button button-icon icon-left action-alert ">
    <div>
        <svg width="10" height="10" class="icon icon-plus"><use xlink:href="/assets/svg/core.svg#plus" /></svg>
        <span>Submit</span>
    </div>
</a>

<!-- Button Warning -->
<button class="button button-icon  icon-left action-warning">
  <div>
    <svg width="16" height="16" class="icon icon-plus"><use xlink:href="/assets/svg/core.svg#plus" /></svg>
    <span>Submit</span>
  </div>
</button>

<!-- A Warning -->
<a href="/foo" class="button button-icon icon-left action-warning ">
    <div>
        <svg width="10" height="10" class="icon icon-plus"><use xlink:href="/assets/svg/core.svg#plus" /></svg>
        <span>Submit</span>
    </div>
</a>

<!-- Button Info -->
<button class="button button-icon  icon-left action-info">
  <div>
    <svg width="16" height="16" class="icon icon-plus"><use xlink:href="/assets/svg/core.svg#plus" /></svg>
    <span>Submit</span>
  </div>
</button>

<!-- A Info -->
<a href="/foo" class="button button-icon icon-left action-info ">
    <div>
        <svg width="10" height="10" class="icon icon-plus"><use xlink:href="/assets/svg/core.svg#plus" /></svg>
        <span>Submit</span>
    </div>
</a>

<!-- Button Success -->
<button class="button button-icon  icon-left action-success">
  <div>
    <svg width="16" height="16" class="icon icon-plus"><use xlink:href="/assets/svg/core.svg#plus" /></svg>
    <span>Submit</span>
  </div>
</button>

<!-- A Success -->
<a href="/foo" class="button button-icon icon-left action-success ">
    <div>
        <svg width="10" height="10" class="icon icon-plus"><use xlink:href="/assets/svg/core.svg#plus" /></svg>
        <span>Submit</span>
    </div>
</a>

<!-- Default -->
<button class="button button-icon {{ iconposition }} {{ actionclass }}">
  <div>
    {{ icon 'core/plus' }}
    <span>Submit</span>
  </div>
</button>

<!-- A Left -->
<a href="/foo" class="button button-icon {{ actionclass }} {{ iconposition }}">
  <div>
    {{ icon 'core/plus' 10 }}
    <span>Submit</span>
  </div>
</a>

<!-- Button Right -->
<button class="button button-icon {{ iconposition }} {{ actionclass }}">
  <div>
    {{ icon 'core/plus' }}
    <span>Submit</span>
  </div>
</button>

<!-- A Right -->
<a href="/foo" class="button button-icon {{ actionclass }} {{ iconposition }}">
  <div>
    {{ icon 'core/plus' 10 }}
    <span>Submit</span>
  </div>
</a>

<!-- Button Alert -->
<button class="button button-icon {{ iconposition }} {{ actionclass }}">
  <div>
    {{ icon 'core/plus' }}
    <span>Submit</span>
  </div>
</button>

<!-- A Alert -->
<a href="/foo" class="button button-icon {{ actionclass }} {{ iconposition }}">
  <div>
    {{ icon 'core/plus' 10 }}
    <span>Submit</span>
  </div>
</a>

<!-- Button Warning -->
<button class="button button-icon {{ iconposition }} {{ actionclass }}">
  <div>
    {{ icon 'core/plus' }}
    <span>Submit</span>
  </div>
</button>

<!-- A Warning -->
<a href="/foo" class="button button-icon {{ actionclass }} {{ iconposition }}">
  <div>
    {{ icon 'core/plus' 10 }}
    <span>Submit</span>
  </div>
</a>

<!-- Button Info -->
<button class="button button-icon {{ iconposition }} {{ actionclass }}">
  <div>
    {{ icon 'core/plus' }}
    <span>Submit</span>
  </div>
</button>

<!-- A Info -->
<a href="/foo" class="button button-icon {{ actionclass }} {{ iconposition }}">
  <div>
    {{ icon 'core/plus' 10 }}
    <span>Submit</span>
  </div>
</a>

<!-- Button Success -->
<button class="button button-icon {{ iconposition }} {{ actionclass }}">
  <div>
    {{ icon 'core/plus' }}
    <span>Submit</span>
  </div>
</button>

<!-- A Success -->
<a href="/foo" class="button button-icon {{ actionclass }} {{ iconposition }}">
  <div>
    {{ icon 'core/plus' 10 }}
    <span>Submit</span>
  </div>
</a>
/* Default */
{
  "text": "Go!",
  "iconposition": "icon-left"
}

/* A Left */
{
  "text": "Go!",
  "iconposition": "icon-left"
}

/* Button Right */
{
  "text": "Go!",
  "iconposition": "icon-right"
}

/* A Right */
{
  "text": "Go!",
  "iconposition": "icon-right"
}

/* Button Alert */
{
  "text": "Go!",
  "actionclass": "icon-left action-alert"
}

/* A Alert */
{
  "text": "Go!",
  "actionclass": "icon-left action-alert"
}

/* Button Warning */
{
  "text": "Go!",
  "actionclass": "icon-left action-warning"
}

/* A Warning */
{
  "text": "Go!",
  "actionclass": "icon-left action-warning"
}

/* Button Info */
{
  "text": "Go!",
  "actionclass": "icon-left action-info"
}

/* A Info */
{
  "text": "Go!",
  "actionclass": "icon-left action-info"
}

/* Button Success */
{
  "text": "Go!",
  "actionclass": "icon-left action-success"
}

/* A Success */
{
  "text": "Go!",
  "actionclass": "icon-left action-success"
}

There are no notes for this item.