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

Join 23000+ others and subscribe to our newsletter!