UI Molecules
Buttons Group
1.1 Basic example
<div class="amui-m-btn-group btn-group" role="group" aria-label="...">
<button type="button" class="amui-a-btn btn is--default is--active">Left</button>
<button type="button" class="amui-a-btn btn is--default">Middle</button>
<button type="button" class="amui-a-btn btn is--default">Right</button>
</div>
1.2 Sizing
<div class="amui-m-btn-group btn-group btn-group-xs" role="group" aria-label="...">
<button type="button" class="amui-a-btn btn is--default is--active">Left</button>
<button type="button" class="amui-a-btn btn is--default">Middle</button>
<button type="button" class="amui-a-btn btn is--default">Right</button>
</div>
<div class="amui-m-btn-group btn-group btn-group-sm" role="group" aria-label="...">
<button type="button" class="amui-a-btn btn is--default is--active">Left</button>
<button type="button" class="amui-a-btn btn is--default">Middle</button>
<button type="button" class="amui-a-btn btn is--default">Right</button>
</div>
<div class="amui-m-btn-group btn-group" role="group" aria-label="...">
<button type="button" class="amui-a-btn btn is--default is--active">Left</button>
<button type="button" class="amui-a-btn btn is--default">Middle</button>
<button type="button" class="amui-a-btn btn is--default">Right</button>
</div>
<div class="amui-m-btn-group btn-group btn-group-lg" role="group" aria-label="...">
<button type="button" class="amui-a-btn btn is--default is--active">Left</button>
<button type="button" class="amui-a-btn btn is--default">Middle</button>
<button type="button" class="amui-a-btn btn is--default">Right</button>
</div>
1.2 Icon
<div class="amui-m-btn-group btn-group btn-group-xs is--icon" role="group" aria-label="...">
<button type="button" class="amui-a-btn btn is--active is--default">
<i class="material-icons md-16">group</i>
</button>
<button type="button" class="amui-a-btn btn is--default">
<i class="material-icons md-16">person</i>
</button>
</div>
<div class="amui-m-btn-group btn-group btn-group-sm is--icon" role="group" aria-label="...">
<button type="button" class="amui-a-btn btn is--active is--default">
<i class="material-icons md-24">group</i>
</button>
<button type="button" class="amui-a-btn btn is--default">
<i class="material-icons md-24">person</i>
</button>
</div>
<div class="amui-m-btn-group btn-group btn-group-default is--icon" role="group" aria-label="...">
<button type="button" class="amui-a-btn btn is--active is--default">
<i class="material-icons md-24">group</i>
</button>
<button type="button" class="amui-a-btn btn is--default">
<i class="material-icons md-24">person</i>
</button>
</div>
<div class="amui-m-btn-group btn-group btn-group-lg is--icon" role="group" aria-label="...">
<button type="button" class="amui-a-btn btn is--active is--default">
<i class="material-icons md-24">group</i>
</button>
<button type="button" class="amui-a-btn btn is--default">
<i class="material-icons md-24">person</i>
</button>
</div>