Button Group
Group related actions using <button>s inside a
<fieldset role="group">.
Default
<fieldset role="group">
<button class="ghost">Archive</button>
<button class="ghost">Report</button>
<button class="ghost">Snooze</button>
</fieldset>Mixed
Combine icon buttons and labeled buttons in the same group.
<fieldset role="group">
<button class="ghost square" aria-label="Back" data-tooltip="Go back">
←
</button>
<button class="ghost">Archive</button>
<button class="ghost">Report</button>
<button class="ghost">Snooze</button>
<button class="ghost square" aria-label="More" popovertarget="more-menu">
···
</button>
</fieldset>
<div id="more-menu" popover>
<menu>
<li><button class="ghost">Move to folder</button></li>
<li><button class="ghost">Duplicate</button></li>
<li><button class="ghost">Export</button></li>
<li><hr /></li>
<li><button class="ghost destructive">Delete</button></li>
</menu>
</div>With input
Inputs stretch to fill the available space.
<fieldset role="group">
<input type="text" placeholder="Search..." />
<button class="ghost square" aria-label="Search">…</button>
</fieldset>Quantity
A number input paired with increment and decrement buttons.
<fieldset role="group">
<input type="number" value="8" min="0" style="width: 4rem" />
<button
class="ghost square"
aria-label="Decrement"
onclick="this.closest('fieldset').firstElementChild.stepDown()"
>
−
</button>
<button
class="ghost square"
aria-label="Increment"
onclick="this.closest('fieldset').firstElementChild.stepUp()"
>
+
</button>
</fieldset>