Button
The standard action button. Use <button class="btn"> for actions and <a class="btn"> only for navigation styled as a button. Appearance variants set emphasis (primary for the single main action, danger/warning for destructive/risky ones); .active marks a toggled-on state; group related buttons inside .btn-group.
Root: .btn on <button>, <a>
Examples
Example 1
<button class="btn btn-primary">Create</button>Example 2
<div class="btn-group"><button class="btn">Days</button><button class="btn active">Weeks</button><button class="btn">Months</button></div>Contract
Variants & modifiers
| Class | Axis | Rules |
|---|---|---|
btn-primary | appearance | optional · exclusive |
btn-warning | appearance | optional · exclusive |
btn-danger | appearance | optional · exclusive |
btn-subtle | appearance | optional · exclusive |
btn-link | appearance | optional · exclusive |
btn-subtle-link | appearance | optional · exclusive |
btn-compact | modifier | optional |
btn-icon | modifier | optional |
btn-block | modifier | optional |
active | modifier | optional |
disabled | modifier | optional |
Accessibility
| On | Attribute | Level | When |
|---|---|---|---|
.btn-icon | aria-label | required |
Prefer the native disabled attribute on <button> over the .disabled class (the class removes pointer events but a link stays focusable). On <a class="btn"> used as an action, add role="button". .btn-group is a plain flex wrapper of direct .btn children — give it role="group" plus aria-label when the grouping is semantic (e.g. a segmented control).
Nesting
Allowed in:
forms.navbar-actions.modal-footer.message-actions.btn-group (as direct child)toolbars
Never inside (or containing):
.btn