Button

Primary Button

<a class="btn btn-primary"> Button </a>

Default Button

<a class="btn btn-default"> Button </a>

Default B Button

<a class="btn btn-default-b"> Button </a>

Button with Icon

<a class="btn btn-default btn--has-icon"> <span class="icon-wrapper"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#burger"></use> </svg> </span> <span class="title"> Button </span> </a> <a class="btn btn-default btn--has-icon btn-icon--is-right"> <span class="icon-wrapper"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#arrow-right"></use> </svg> </span> <span class="title"> Button </span> </a> <a class="btn btn-default-b btn--has-icon btn-icon--is-right"> <span class="icon-wrapper"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#arrow-down"></use> </svg> </span> <span class="title"> Button </span> </a>

Default Button Invert

<button class="button btn btn-default btn-invert">Submit</button>

Icon Button Type A

<a class="btn iconButton iconButton--type-a"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#cart"></use> </svg> <span class="title"> <!-- --> </span> </a>

Icon Button Type B

<a class="btn iconButton iconButton--type-b"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#plus"></use> </svg> <span class="title"> <!-- --> </span> </a>

Icon Button Type D

<a class="btn iconButton iconButton--type-d"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#edit"></use> </svg> <span class="title"> <!-- --> </span> </a>

Icon Button Type C

<a class="btn iconButton iconButton--type-c"> <span class="icon-wrapper"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#phone"></use> </svg> </span> <span class="title"> phone </span> </a>