Button group
Joins related buttons into one control, horizontally or vertically.
Outline group
<div class="mn-btn-group" role="group" aria-label="Pagination">
<button class="mn-btn mn-btn-outline">Previous</button>
<button class="mn-btn mn-btn-outline">Today</button>
<button class="mn-btn mn-btn-outline">Next</button>
</div>Split button
<div class="mn-btn-group" role="group" aria-label="Save">
<button class="mn-btn">Save changes</button>
<button class="mn-btn mn-btn-icon" aria-label="More save options" popovertarget="split-menu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></button>
</div>
<div class="mn-menu" popover id="split-menu" data-placement="bottom-end">
<button class="mn-menu-item">Save as draft</button>
<button class="mn-menu-item">Save and publish</button>
</div>Vertical
<div class="mn-btn-group mn-btn-group-vertical" role="group" aria-label="Zoom">
<button class="mn-btn mn-btn-outline mn-btn-icon" aria-label="Zoom in"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button>
<button class="mn-btn mn-btn-outline mn-btn-icon" aria-label="Zoom out"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/></svg></button>
</div>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/button-group.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-btn-group | Container. Merges the radii of its children. |
| mn-btn-group-vertical | Stacks the buttons. |
Accessibility
- Wrap with role="group" and an aria-label so the relationship is announced.
- For a single-choice toggle use Toggle group instead.