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>