Button
Use custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.
Styles
Predefined button styles, each serving its own semantic purpose.
<button type="button" class="k-button k-button--default">
Button with default class
</button>
<button type="button" class="k-button k-button--primary">
Button with primary class
</button>
<button type="button" class="k-button k-button--success">
Button with success class
</button>
<button type="button" class="k-button k-button--info">
Button with info class
</button>
<button type="button" class="k-button k-button--warning">
Button with warning class
</button>
<button type="button" class="k-button k-button--danger">
Button with danger class
</button>
<button type="button" class="k-button k-button--link">
Button with link class
</button>
Sizes
Fancy larger or smaller buttons.
Add an icon only for square icon buttons
<button type="button" class="k-button k-button--default k-button--tiny">
Button text
</button>
<button type="button" class="k-button k-button--default k-button--small">
Button text
</button>
<button type="button" class="k-button k-button--default k-button--large">
Button text
</button>
<button type="button" class="k-button k-button--default k-button--block">
Button text
</button>
<p>Add an icon only for square icon buttons</p>
<button type="button" class="k-button k-button--primary k-button--tiny">
<span class="k-visually-hidden">Save</span>
<span class="k-icon-check" aria-hidden="true"></span>
</button>
<button type="button" class="k-button k-button--primary k-button--small">
<span class="k-visually-hidden">Save</span>
<span class="k-icon-check" aria-hidden="true"></span>
</button>
<button type="button" class="k-button k-button--primary">
<span class="k-visually-hidden">Save</span>
<span class="k-icon-check" aria-hidden="true"></span>
</button>
<button type="button" class="k-button k-button--primary k-button--large">
<span class="k-visually-hidden">Save</span>
<span class="k-icon-check" aria-hidden="true"></span>
</button>
States
Buttons can have different states.
<button type="button" class="k-button k-button--default k-is-active">
Button text
</button>
<button type="button" class="k-button k-button--default k-is-disabled">
Button text
</button>
Groups
Create groups of buttons for related actions.
<div class="k-button-group">
<button type="button" class="k-button k-button--default k-is-active">
Button text
</button>
<button type="button" class="k-button k-button--default">
Button text
</button>
<button type="button" class="k-button k-button--default">
Button text
</button>
</div>
Loader in button
See loader molecule
Need Help? Let our developers personally assist you. Business or Agency subscribers can ask development related questions in our Support Center.