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 text
</button>

<button type="button" class="k-button k-button--primary">
    Button text
</button>

<button type="button" class="k-button k-button--success">
    Button text
</button>

<button type="button" class="k-button k-button--info">
    Button text
</button>

<button type="button" class="k-button k-button--warning">
    Button text
</button>

<button type="button" class="k-button k-button--danger">
    Button text
</button>

<button type="button" class="k-button k-button--link">
    Button text
</button>

Sizes

Fancy larger or smaller 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>

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>

Need Help?

Let our developers personally assist you. You can ask development related questions in our Support Center. Only for Business or Agency subscribers.