UI Toolkit

Buttons

Style Requires MAX Custom Bootstrap Stylesheet

Primary and Default Buttons

Use primary buttons for actions that go to the next step. Use default buttons for actions that happen on the current page.

Generous white space lends focus and makes buttons more actionable. Avoid using multiple primary buttons on a single page; there can be multiple default buttons per page.

  • Base Blue background color
  • 3px rounded corner
  • 6px top and bottom padding
  • 12px left and right padding
  • 16px Open Sans text in white
  • Title case

  • White background color
  • 16px Open Sans text in dark gray
<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-default">Default Button</button>
Ext.onReady(function(){

  new Ext.Button({
    renderTo: Ext.getBody(),
    cls: 'btn-wrapper btn-primary-wrapper',
    text: 'Primary Button'
  })

  new Ext.Button({
    renderTo: Ext.getBody(),
    cls: 'btn-wrapper btn-default-wrapper',
    text: 'Default Button'
  })

});
View on CodePen
Coming Soon
Coming Soon

Labels

Use verbs and an active voice. Language should be clear, succinct, and informative. Limit the copy length to 22 characters.

<button class="btn btn-primary">Register</button>
<button class="btn btn-primary">Continue</button>
<button class="btn btn-primary">Submit Application</button>

Icons

Use icons consistently. Each icon should be used exclusively for one action. Icons appear to the left of the button text. Buttons that have “forward” actions have icons to the right of the text, and those with “back” actions have icons to the left.

<button class="btn btn-primary"><span class="fa fa-upload"></span>Upload Document</button>
<button class="btn btn-default"><span class="fa fa-chevron-left"></span>Back</button> <button class="btn btn-default">Next<span class="fa fa-chevron-right fa-right"></span></button>

States Requires MAX Custom Bootstrap Stylesheet

Normal

  • Base Blue background color
  • White text

Hover/Focus

  • Dark Blue background color

Active

  • Darker Blue background color

Disabled

  • Opacity 65%
  • Cursor set to not-allowed

<button class="btn btn-primary" disabled>Disabled</button>

Variations Requires MAX Custom Bootstrap Stylesheet

Sizes

<button type="button" class="btn btn-primary btn-lg">Large Button</button>
<button type="button" class="btn btn-primary">Default Button</button>
<button type="button" class="btn btn-primary btn-sm">Small Button</button>
<button type="button" class="btn btn-primary btn-xs">Extra Small Button</button>

<button type="button" class="btn btn-primary btn-block">Block Level Button</button>

Colors

Indicates a successful or positive action.

Indicates caution should be taken with this action.

Indicates a dangerous or potentially negative action.

Deemphasize a button by making it look like a link while maintaining button behavior.

<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

Groups

<div class="btn-group" role="group">
  <button type="button" class="btn btn-default">First</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Last</button>
</div>

<div class="btn-group" role="group">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>
  <button type="button" class="btn btn-default">3</button>
  <button type="button" class="btn btn-default">4</button>
  <button type="button" class="btn btn-default">5</button>
  <button type="button" class="btn btn-default">6</button>
</div>

Dropdowns

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Single Button Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu"> <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li>
  </ul>
</div>
<div class="btn-group">
  <button type="button" class="btn btn-default">Split Button Dropdown</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>