Toolbar - ZUI Documentation

Summary

A toolbar is a collection of buttons. This pattern should be used to provide quick access to actions for a specific part of a page.

There are no attributes defined for this pattern.

Example

Markup

<div class="zui-toolbar">
    <div class="zui-toolbar-primary">
        <div class="zui-button-group">
            <button class="zui-button-primary">Primary</button>
        </div>

        <div class="zui-button-group">
            <button>Button</button>
            <button>Button</button>
            <button>Button</button>
        </div>

        <div class="zui-button-group">
            <button>Button</button>
            <button>Button</button>
            <button>Button</button>
        </div>
    </div>

    <div class="zui-toolbar-secondary">
        <div class="zui-button-group">
            <button>Button</button>
            <button>Button</button>
            <button>Button</button>
        </div>
    </div>
</div>