Buttons
Global Button Properties
- Button width: varies based on character length
- Font: open-sans regular
- 2px corner radius
- Minimum margin: 10px (Include a minimum of 10px of margin when placed next to other UI elements)
Button Colors
Default
Primary
Danger
<div>
<p><b>Default</b></p>
<button type="button" class="btn btn-default-blue">Default Blue</button><br>
<button type="button" class="btn btn-default-dark-blue">Default Dark Blue</button><br>
<button type="button" class="btn btn-default-green">Default Green</button><br>
</div>
<div>
<p><b>Primary</b></p>
<button type="button" class="btn btn-primary-blue">Primary Blue</button><br>
<button type="button" class="btn btn-primary-dark-blue">Primary Dark Blue</button><br>
<button type="button" class="btn btn-primary-green">Primary Green</button><br>
</div>
<div>
<p><b>Danger</b></p>
<button type="button" class="btn btn-danger">Danger</button><br>
</div>
Button Disabled States
Default
Primary
Danger
<div>
<p><b>Default</b></p>
<button type="button" disabled class="btn btn-default-blue">Default Blue</button><br>
<button type="button" disabled class="btn btn-default-dark-blue">Default Dark Blue</button><br>
<button type="button" disabled class="btn btn-default-green">Default Green</button><br>
</div>
<div>
<p><b>Primary</b></p>
<button type="button" disabled class="btn btn-primary-blue">Primary Blue</button><br>
<button type="button" disabled class="btn btn-primary-dark-blue">Primary Dark Blue</button><br>
<button type="button" disabled class="btn btn-primary-green">Primary Green</button><br>
</div>
<div>
<p><b>Danger</b></p>
<button type="button" disabled class="btn btn-danger">Danger</button><br>
</div>
Button Sizes
Large
Medium (Default)
Small
<div class="col-sm-3">
<p><b>Large</b></p>
<button type="button" class="btn btn-primary-blue btn-lg">Large</button><br>
</div>
<div class="col-sm-3">
<p><b>Medium (Default)</b></p>
<button type="button" class="btn btn-primary-blue">Default</button><br>
</div>
<div class="col-sm-3">
<p><b>Small</b></p>
<button type="button" class="btn btn-primary-blue btn-sm">Small</button><br>
</div>