Buttons
Learn how to style buttons.
Button Structure
Every button must have a .btn class followed by size, and style classes.
Simple Button
<button type="button" class="btn md primary">
<span>Simple Button</span>
</button>
Note, that the button text should be wrapped in a <span> element for a correct styling.
Result:
Link Button
<a href="#link-button" class="btn md primary">
<span>Link Button</span>
</a>
Note, that the button text should be wrapped in a <span> element for a correct styling.
Result:
Link ButtonButton with Icon
<button type="button" class="btn md primary">
<svg class="icon" aria-hidden="true" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m20.72 7.03-1.83 1.83-3.75-3.75 1.83-1.83a.95.95 0 0 1 .7-.28c.28 0 .52.1.7.28l2.35 2.35c.19.18.28.42.28.7s-.1.51-.28.7zm-16.72 9.22 10.06-10.06 3.75 3.75-10.06 10.06h-3.75z" fill-rule="evenodd">
</path>
</svg>
<span>Edit Profile</span>
</button>
You can place the <svg> element before or after the button label.
Result:
Sizes
| Size Class | Result |
|---|---|
.btn.lg
|
|
.btn.md
|
|
.btn.sm
|
|
.btn.xs
|
|
.btn.{size-class}.w-100
|
Styles
| Size Class | Result |
|---|---|
.btn.primary
|
|
.btn.secondary
|
|
.btn.borderless
|
|
.btn.danger
|
|
.btn.success
|
|
.btn.link
|
|
.btn.link.active
|
|
.btn.inverted
|
|
.btn.inverted.secondary
|
|
.btn.inverted.link
|
|
.btn.disabled
|
|
.btn.loading
|