Buttons

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>
filed under: