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>

View Code Snippet

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>

View Code Snippet

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>

View Code Snippet