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.