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 k-toolbar-fullbutton">
        <span class="k-icon-plus" aria-hidden="true"></span>
        <span class="k-toolbar__text">Primary action</span>
    </button>
    <button type="button" class="k-button k-button--default">
        <span class="k-icon-pencil" aria-hidden="true"></span>
        <span class="k-toolbar__text">Other action</span>
    </button>
    <button type="button" class="k-button k-button--default" disabled>
        <span class="k-icon-graph" aria-hidden="true"></span>
        <span class="k-toolbar__text">Disabled action</span>
    </button>
    <button type="button" class="k-button k-button--default" disabled>
        <span class="k-icon-check" aria-hidden="true"></span>
        <span class="k-toolbar__text">Disabled action</span>
    </button>
</div>

Important: add an icon to every button since icons are used as the only content of a button on mobile. If you don’t want icons add the .k-toolbar-fullbutton class to the buttons without icons.

Need Help?

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