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. You can ask development related questions in our Support Center. Only for Business or Agency subscribers.

Join 23000+ others and subscribe to our newsletter!