Badges can be used as part of links or buttons to provide a counter.
{% example html %}
-<button class="btn btn-primary">
+<button type="button" class="btn btn-primary">
Notifications <span class="badge badge-light">4</span>
</button>
{% endexample %}
Unless the context is clear (as with the "Notifications" example, where it is understood that the "4" is the number of notifications), consider including additional context with a visually hidden piece of additional text.
{% example html %}
-<button class="btn btn-primary">
+<button type="button" class="btn btn-primary">
Profile <span class="badge badge-light">9</span>
<span class="sr-only">unread messages</span>
</button>
{% highlight html %}
<!-- Large modal -->
-<button class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
+<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<body>
- <button class="btn btn-secondary float-right tooltip-bottom" title="This should be shifted to the left">Shift Left</button>
- <button class="btn btn-secondary tooltip-bottom" title="This should be shifted to the right">Shift Right</button>
- <button class="btn btn-secondary tooltip-right" title="This should be shifted down">Shift Down</button>
+ <button type="button" class="btn btn-secondary float-right tooltip-bottom" title="This should be shifted to the left">Shift Left</button>
+ <button type="button" class="btn btn-secondary tooltip-bottom" title="This should be shifted to the right">Shift Right</button>
+ <button type="button" class="btn btn-secondary tooltip-right" title="This should be shifted down">Shift Down</button>
- <button class="btn btn-secondary tooltip-right btn-bottom" title="This should be shifted up">Shift Up</button>
+ <button type="button" class="btn btn-secondary tooltip-right btn-bottom" title="This should be shifted up">Shift Up</button>
<div class="container-viewport">
- <button class="btn btn-secondary tooltip-viewport-bottom" title="This should be shifted to the left">Shift Left</button>
- <button class="btn btn-secondary tooltip-viewport-right" title="This should be shifted down">Shift Down</button>
+ <button type="button" class="btn btn-secondary tooltip-viewport-bottom" title="This should be shifted to the left">Shift Left</button>
+ <button type="button" class="btn btn-secondary tooltip-viewport-right" title="This should be shifted down">Shift Down</button>
- <button class="btn btn-secondary float-right tooltip-viewport-bottom" title="This should be shifted to the right">Shift Right</button>
+ <button type="button" class="btn btn-secondary float-right tooltip-viewport-bottom" title="This should be shifted to the right">Shift Right</button>
- <button class="btn btn-secondary tooltip-viewport-right btn-bottom" title="This should be shifted up">Shift Up</button>
+ <button type="button" class="btn btn-secondary tooltip-viewport-right btn-bottom" title="This should be shifted up">Shift Up</button>
</div>
{% example html %}
<div class="bg-info clearfix">
- <button class="btn btn-secondary float-left">Example Button floated left</button>
- <button class="btn btn-secondary float-right">Example Button floated right</button>
+ <button type="button" class="btn btn-secondary float-left">Example Button floated left</button>
+ <button type="button" class="btn btn-secondary float-right">Example Button floated right</button>
</div>
{% endexample %}