<div class="action-bar">
<button type="button" class="alt">
<span>
<span>Button 1</span>
</span>
</button>
<button type="button">
<span>
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#save" />
</svg>
<span>Button 2</span>
</span>
</button>
</div>
<div class="action-bar">
{{#> @partial-block}}
{{#each buttons}}
{{> @button}}
{{/each}}
{{/ @partial-block}}
</div>
{
"buttons": [
{
"text": "Button 1",
"modifier": "alt"
},
{
"text": "Button 2",
"icon": "save"
}
]
}
/**
* Action bar
*
* Display buttons inline aligned flex-end
*/
@media screen {
.action-bar {
display: flex;
justify-content: flex-end;
}
.action-bar > * {
margin: 0;
}
.action-bar > * + * {
margin: 0 0 0 1em;
}
}
An action bar is primarily used for displaying button components in an inline fashion. Alignment is always to the right in LTR languages.