LumoCSS logoLumoCSS logo
Forms

Button group

Groups related button actions in a single line. Use role="group" with class="buttons" for the Lumo layout hook.

Default

<div role="group" class="buttons" aria-label="Buttons group">
    <button>Primary</button>
    <button class="outline">Primary outline</button>
    <button class="secondary">Secondary</button>
</div>

Centered buttons group

<div role="group" class="buttons align-center" aria-label="Pagination">
    <button class="secondary" aria-label="Previous page">&lt;</button>
    <button class="secondary outline">1</button>
    <button class="secondary outline">2</button>
    <button class="secondary" aria-label="Next page">&gt;</button>
</div>