E047

E047

.btn should only be used on <a>, <button>, <input>, or <label> elements.

.btn is used to style an element as an interactive, clickable button.

Creating button-ish widgets using elements other than <a>, <button>, <input>, or <label> can cause problems for users of assistive technologies (such as screen readers) since by default such widgets won't be recognized as interactive by the technology, unless you put in extra work involving ARIA attributes, tabindex attributes, and custom JavaScript.

Such widgets are also semantically dubious. A <button> element represents a button, with the inherent associated semantics (e.g. can be interacted with via clicking). By contrast, a <div> or <span> element has no such inherent meaning (although utilizing ARIA can remedy this, to some degree).

Wrong:

<span class="btn btn-primary">Button</span>
<div class="btn btn-primary">Button</div>

Right:

<a class="btn btn-primary">Button</a>
<button type="button" class="btn btn-primary">Button</button>
<input type="button" class="btn btn-primary" value="Button">
<label class="btn btn-primary">Button</label>