Button groups

tier 2 — classes

Two or more buttons that act on the same thing, joined so they read as one control. The variants of a single button — icon-only, ghost, small, the FAB — are on the Buttons page.

A group is not a way to pick one of several That is .segmented, which is built from radios and is announced as a choice. Wrap a group of actions in role="group" with an aria-label saying what they act on.

Button group

One shared border between neighbours rather than two adjacent ones, so the buttons read as one control instead of a row.

<div class="sedna-col">
    <div class="btn-group" role="group" aria-label="Order actions">
        <button class="btn" type="button"><i class="ri-arrow-left-line"></i> Previous</button>
        <button class="btn" type="button">Next <i class="ri-arrow-right-line"></i></button>
    </div>
    <div class="btn-group" role="group" aria-label="Zoom">
        <button class="btn btn-icon" type="button" aria-label="Zoom out">&minus;</button>
        <button class="btn" type="button">100%</button>
        <button class="btn btn-icon" type="button" aria-label="Zoom in">+</button>
    </div>
</div>

Split button

A primary action plus a menu of its variants, as two real buttons: the main action must be operable without ever opening the menu, and the caret needs its own accessible name and its own aria-expanded.

<div class="sedna-row-wrap">
    <div class="split-btn">
        <button class="btn btn-go" type="button"><i class="ri-send-plane-line"></i> Send reply</button>
        <button class="btn btn-go" type="button" aria-label="More send options" aria-expanded="false">
            <i class="ri-arrow-down-s-line"></i>
        </button>
    </div>
    <div class="split-btn">
        <button class="btn" type="button">Export</button>
        <button class="btn" type="button" aria-label="More export formats" aria-expanded="false">
            <i class="ri-arrow-down-s-line"></i>
        </button>
    </div>
</div>

Live — open it. Wrap the split button and its panel in .menu-anchor, put data-menu-toggle on the caret and hidden on the panel for the closed state, and Sedna.UI.js handles the rest. The panel carries .menu--start because the trigger is at the leading edge of its row — leave it off at the trailing end — and the destructive variant goes inside it with .menu-item--danger.

<div class="menu-anchor">
    <div class="split-btn">
        <button class="btn btn-go" type="button"><i class="ri-send-plane-line"></i> Dispatch</button>
        <button class="btn btn-go" type="button" data-menu-toggle
                aria-label="More dispatch options" aria-expanded="false">
            <i class="ri-arrow-down-s-line"></i>
        </button>
    </div>
    <div class="menu menu--start" hidden>
        <span class="menu-label">Dispatch as</span>
        <button class="menu-item" type="button">
            <i class="ri-truck-line"></i> Standard
            <span class="menu-item-note">3–5 days</span>
        </button>
        <button class="menu-item" type="button">
            <i class="ri-flashlight-line"></i> Express
            <span class="menu-item-note">Next day</span>
        </button>
        <hr class="menu-sep" />
        <button class="menu-item menu-item--danger" type="button">
            <i class="ri-close-circle-line"></i> Cancel the order
        </button>
    </div>
</div>

Three sizes

Add .btn-sm or .btn-lg to every button in the group; the group itself carries no tier, and each button then takes the matching control height.

4 of 128

<div class="sedna-col sedna-gap-2">
    <div class="sedna-row-wrap">
        <div class="btn-group" role="group" aria-label="Small — page through the order">
            <button class="btn btn-sm" type="button"><i class="ri-arrow-left-line"></i> Previous</button>
            <button class="btn btn-sm" type="button">Next <i class="ri-arrow-right-line"></i></button>
        </div>
        <span class="chip"><span class="chip-label">4 of 128</span></span>
    </div>
    <div class="sedna-row-wrap">
        <div class="btn-group" role="group" aria-label="Page through the order">
            <button class="btn" type="button"><i class="ri-arrow-left-line"></i> Previous</button>
            <button class="btn" type="button">Next <i class="ri-arrow-right-line"></i></button>
        </div>
        <span class="chip chip-lg"><span class="chip-label">4 of 128</span></span>
    </div>
    <div class="sedna-row-wrap">
        <div class="btn-group" role="group" aria-label="Large — page through the order">
            <button class="btn btn-lg" type="button"><i class="ri-arrow-left-line"></i> Previous</button>
            <button class="btn btn-lg" type="button">Next <i class="ri-arrow-right-line"></i></button>
        </div>
        <input class="form-input form-input-lg" type="text" value="ORD-4209" aria-label="Order number" style="max-width:140px" />
    </div>
</div>

Button groups

Button group

Split button

A split button that opens a menu

Three sizes