Buttons

Main Button

Secondary Button

Danger Button

Icon Usage

These icons come from the Material Design Iconic Font created by Sergey Kupletsky.

Link Buttons

Used to make anchors look and behave like a button.

Link Button (Primary) Link Button (Secondary) Link Button (Danger)


<h3>Main Button</h3>
<div class="versico example">
    <button class="btn btn-primary" type="button">Main Button</button>
</div>
<div class="versico example">
    <button class="btn btn-primary hover" type="button">Hover</button>
    <button class="btn btn-primary active" type="button">Active</button>
    <button class="btn btn-primary" type="button" disabled>Disabled</button>
    <button class="btn btn-primary focus" type="button">Focus</button>
</div>
<h3>Secondary Button</h3>
<div class="versico example">
    <button class="btn btn-secondary" type="button">Secondary Button</button>
</div>
<div class="versico example">
    <button class="btn btn-secondary hover" type="button">Hover</button>
    <button class="btn btn-secondary active" type="button">Active</button>
    <button class="btn btn-secondary" type="button" disabled>Disabled</button>
    <button class="btn btn-secondary focus" type="button">Focus</button>
</div>
<h3>Danger Button</h3>
<div class="versico example">
    <button class="btn btn-tertiary" type="button">Danger Button</button>
</div>
<div class="versico example">
    <button class="btn btn-tertiary hover" type="button">Hover</button>
    <button class="btn btn-tertiary active" type="button">Active</button>
    <button class="btn btn-tertiary" type="button" disabled>Disabled</button>
    <button class="btn btn-tertiary focus" type="button">Focus</button>
</div>
<h3>Icon Usage</h3>
<p>These icons come from the <a href="http://zavoloklom.github.io/material-design-iconic-font/" class="body-link" target="_blank">Material Design Iconic Font</a> created by Sergey Kupletsky.</p>
<div class="versico example clear-margin-top">
    <button class="btn btn-primary icon left" type="button"><i class="zmdi zmdi-chevron-left zmdi-hc-3x"></i> Back</button> <button class="btn btn-primary icon right" type="button">Next <i class="zmdi zmdi-chevron-right zmdi-hc-3x"></i></button>
</div>
<div class="versico example clear-margin-top">
    <button class="btn btn-primary icon left" type="button"><i class="zmdi zmdi-file-plus zmdi-hc-2x"></i> Attach</button> <button class="btn btn-primary icon left" type="button"><i class="zmdi zmdi-download zmdi-hc-2x"></i> Download</button> <button class="btn btn-primary icon left" type="button"><i class="zmdi zmdi-shopping-cart zmdi-hc-2x"></i> Add to Cart</button>
</div>
<div class="versico example">
    <button class="btn btn-tertiary icon left" type="button"><i class="zmdi zmdi-close zmdi-hc-2x"></i> Cancel</button> <button class="btn btn-tertiary icon left" type="button"><i class="zmdi zmdi-close zmdi-hc-2x"></i> Delete</button>
</div>
<h3>Link Buttons</h3>
<p>Used to make anchors look and behave like a button.</p>
<div class="versico example">
    <a href="#do-nothing" class="btn btn-primary btn-link">Link Button (Primary)</a>
    <a href="#do-nothing" class="btn btn-secondary btn-link">Link Button (Secondary)</a>
    <a href="#do-nothing" class="btn btn-tertiary btn-link">Link Button (Danger)</a>
</div>

Main Button

Use main buttons for "Submit" along with actions that route the user outside of the current page.
Use title case for button labels.
Icons will match the text color.

Secondary Button

Use secondary buttons for actions that route the user within the current page.
Use title case for button labels.
Icons will match the text color.

Disabled Button

Use when you need to select multiple items to proceed to the next step and none are selected.

Danger Button

Use for removal, deletion, etc.