Toolbar

Ask a question

Summary

Toolbar2 replaces Toolbar, which included its own buttons implementation. Now we have a Buttons component, Toolbar2 is available as a wrapper. Note that AUI Buttons includes a wrapper that creates combined button sets.

Toolbar2 simply creates the layout:

  • (required) primary and secondary, defaulting to left/right alignment
  • (optional) groups, defaulting to rows - if only one row is required this can be omitted

The buttons component provides all buttons, button states, dropdown integration etc.

Status

API status: general
Included in AUI core? Yes. You do not need to explicitly require the web resource key.
Web resource key: com.atlassian.auiplugin:aui-toolbar2
AMD Module key: N/A
Experimental since: 5.0
General API status: 5.1

Examples

Code

Simple toolbar with a group of buttons:

AخA
 
<div class="aui-toolbar2" role="toolbar">
    <div class="aui-toolbar2-inner">
        <button class="aui-button">One</button>
        <button class="aui-button aui-button-primary">Two</button>
        <button class="aui-button">Three</button>
    </div>
</div>

Single-row toolbar with left/right layout:

 
<div class="aui-toolbar2" role="toolbar">
    <div class="aui-toolbar2-inner">
        <div class="aui-toolbar2-primary">
            <div class="aui-buttons">
                <button class="aui-button aui-button-primary">One</button>
            </div>
            <div class="aui-buttons">
                <button class="aui-button">Two</button>
                <button class="aui-button">Three</button>
                <button class="aui-button">Four</button>
            </div>
            <div class="aui-buttons">
                <button class="aui-button">Five</button>
                <button class="aui-button">Six</button>
            </div>
        </div>
        <div class="aui-toolbar2-secondary">
            <div class="aui-buttons">
                <button class="aui-button">Seven</button>
            </div>
            <div class="aui-buttons">
                <button class="aui-button">Eight</button>
                <button class="aui-button">Nine</button>
                <button class="aui-button">Ten</button>
            </div>
        </div>
    </div>
</div>

A toolbar with multiple rows:

 
<div class="aui-toolbar2" role="toolbar">
    <div class="aui-toolbar2-inner">
        <div class="aui-toolbar2-group">
            <div class="aui-toolbar2-primary">
                <div class="aui-buttons">
                    <button class="aui-button aui-button-primary">One</button>
                </div>
                <div class="aui-buttons">
                    <button class="aui-button">Two</button>
                    <button class="aui-button">Three</button>
                    <button class="aui-button">Four</button>
                </div>
            </div>
            <div class="aui-toolbar2-secondary">
                <div class="aui-buttons">
                    <button class="aui-button">Five</button>
                    <button class="aui-button">Six</button>
                </div>
            </div>
        </div>
        <div class="aui-toolbar2-group">
            <div class="aui-buttons">
                <button class="aui-button">Seven</button>
            </div>
            <div class="aui-buttons">
                <button class="aui-button">Eight</button>
                <button class="aui-button">Nine</button>
                <button class="aui-button">Ten</button>
            </div>
        </div>
    </div>
</div>