Buttons signal actions. They should be used sparingly; each additional button on a page reduces the visual prominence of a call to action.
In contrast, links should lead users to another page or further information.
G80: Providing a submit button to initiate a change of context
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.
<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'
})
});Coming SoonComing SoonUse 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>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>not-allowed<button class="btn btn-primary" disabled>Disabled</button><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>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>
<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>
<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>