Buttons Component (.k-btn)
Versatile button components with full interactive states (:hover, :focus, :active, :disabled), size variations, and semantic action variants.
Style & Semantic Variants
Icon positions: .k-btn__icon works before or after .k-btn__text.
Sizing Scale
Interactive & Disabled States
Loading State
.k-btn--loading + .k-btn__loader
Full Width Block
Usage guide & code sample
Use .k-btn with one semantic variant. Keep icon and label in .k-btn__icon and .k-btn__text spans for consistent alignment.
<button type="button" class="k-btn k-btn--primary">
<span class="k-btn__icon">＋</span>
<span class="k-btn__text">Save changes</span>
</button>Loading button sample
Add .k-btn--loading and keep the loader inside the button. The class disables interaction, hides the optional icon, and keeps the label available to assistive technology.
<button type="button" class="k-btn k-btn--primary k-btn--loading" aria-busy="true">
<span class="k-btn__loader" aria-hidden="true"></span>
<span class="k-btn__text">Saving...</span>
</button>