Default Vanilla button

= codeBlender "button", "atom", { text: "Default" }
<button class='btn btn-default' type='button'>


Link Button Changes button tag to a tag

= codeBlender "button", "atom", { text: "Default", href: "#" }
<a class='btn btn-default' href='#' role='button' type='button'>


Primary Primary context change

= codeBlender "button", "atom", { text: "Primary", context: "primary" }
<button class='btn btn-default btn-primary' type='button'>


Large Button Success large Size

= codeBlender "button", "atom", { text: "Success large size", context: "success", size: "lg" }
<button class='btn btn-default btn-success btn-lg' type='button'>
Success large size


Small block info button

= codeBlender "button", "atom", { block: true, text: "Small block info button", context: "info", size: "sm" }
<button class='btn btn-default btn-block btn-info btn-sm' type='button'>
Small block info button


Icon Button

= codeBlender "button", "atom", { icon: { prepend: { icon: "fa fa-times" } } }
<button class='btn btn-default' type='button'>
<span class='fa fa fa-times'></span>


Image Button

= codeBlender "button", "atom", { image: { src: lorem.image( "32x32" ) }}
<button class='btn btn-default' type='button'>
<figure class='image' itemprop='image' itemscope itemtype=''>
<img src="" alt="Image" class="image__img" itemprop="contentUrl" />


Resources Useful websites and tutorials


Task Date
Complete the other buttons actions on bootstrap
Explain in here all the places a button can be used
Change href to Link and create a new Link Partial
Allow for an image or icon before also
locals[ :text ] seems to be required but what if we just want an icon button provide option and graceful fallback on errors
Handle the target a bit better should be contained in a link array link: { uri:, target: } so contained