<ul class="button-group">
<li class="button-group__item">
<button class="btn btn-primary " type="button">
<span class="btn__inner">
<span class="btn__text">Confirm Changes</span>
</span>
</button>
</li>
<li class="button-group__item">
<button class="btn btn-secondary " type="button">
<span class="btn__inner">
<span class="btn__text">Cancel</span>
</span>
</button>
</li>
</ul>
<ul class="button-group{{#if isSegmented}} button-group-segmented{{/if}}{{#if isFloating}} button-group-floating{{/if}}">
{{#each actions}}
<li class="button-group__item">
{{> @button }}
</li>
{{/each}}
</ul>
{
"actions": [
{
"text": "Confirm Changes",
"className": "btn-primary"
},
{
"text": "Cancel",
"className": "btn-secondary"
}
]
}
Button groups arrange related actions in close proximity. For example, a primary and secondary action.
A segmented Button Group may be used when several actions are closely related and there is no clear hierarchy among them.
A floating Button Group may be used for a Context Menu of related actions.