Documentation

Toolbar 2

Code snippetsDesign guidelines

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:aui-toolbar2
Experimental since:5.0
General API status:5.1

Examples

Code

Simple example with left/right layout:

<div class="aui-toolbar2" role="toolbar">
    <div class="aui-toolbar2-inner">
        <div class="aui-toolbar2-primary"><!-- insert .aui-buttons here --></div>
        <div class="aui-toolbar2-secondary"><!-- insert .aui-buttons here --></div>
    </div>
</div>

Markup with all options:

<div class="aui-toolbar2" role="toolbar">
    <div class="aui-toolbar2-inner">
        <div class="aui-toolbar2-group">
            <div class="aui-toolbar2-primary"><!-- insert .aui-buttons here --></div>
            <div class="aui-toolbar2-secondary"><!-- insert .aui-buttons here --></div>
        </div>
        <div class="aui-toolbar2-group">
            <div class="aui-toolbar2-primary"><!-- insert .aui-buttons here --></div>
            <div class="aui-toolbar2-secondary"><!-- insert .aui-buttons here --></div>
        </div>
    </div>
</div>