Toolbar

The toolbar should always be placed at top of the content area:

  • The actions in the toolbar are only applying to the list, and not to the elements in the left sidebar.
  • The actions in the toolbar could ignore the filters that are active on the list below it.

The toolbar markup is being rendered by our framework using <ktml:toolbar type="actionbar">.

<div class="k-toolbar k-js-toolbar">
    <button type="button" class="k-button k-button--success">
        <span class="k-icon-plus" aria-hidden="true"></span>
        Primary action
    </button>
    <button type="button" class="k-button k-button--default">
        <span class="k-icon-pencil" aria-hidden="true"></span>
        Other action
    </button>
    <button type="button" class="k-button k-button--default" disabled>
        <span class="k-icon-graph" aria-hidden="true"></span>
        Disabled action
    </button>
    <button type="button" class="k-button k-button--default" disabled>
        <span class="k-icon-check" aria-hidden="true"></span>
        Disabled action
    </button>
</div>

Important: add an icon to every button since icons are used as the only content of a button on mobile.

Need Help?

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