Toolbar2
Summary
AUI Toolbar 2 is a wrapper around the AUI Buttons component for grouping and arranging actions.
The toolbar pattern is responsible for 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 |
---|---|
Web resource key: |
com.atlassian.auiplugin:aui-toolbar2
|
AMD Module key: | N/A |
Experimental API: | 5 |
General API: | 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>