Basic Button Group

Group related buttons together in a horizontal row.

Simple Button Group

HTML 
<div class="ss-c-button-group" role="group" aria-label="Basic button group">
            <button class="ss-c-button">Left</button>
            <button class="ss-c-button">Middle</button>
            <button class="ss-c-button">Right</button>
        </div>

With Links

Previous Current Next
HTML 
<div class="ss-c-button-group" role="group" aria-label="Navigation group">
            <a href="#" class="ss-c-button">Previous</a>
            <a href="#" class="ss-c-button">Current</a>
            <a href="#" class="ss-c-button">Next</a>
        </div>

Button Group Variants

Different visual styles for button groups.

Primary Group

HTML 
<div class="ss-c-button-group" role="group" aria-label="Primary group">
            <button class="ss-c-button ss-c-button--primary">One</button>
            <button class="ss-c-button ss-c-button--primary">Two</button>
            <button class="ss-c-button ss-c-button--primary">Three</button>
        </div>

Outline Group

HTML 
<div class="ss-c-button-group" role="group" aria-label="Outline group">
            <button class="ss-c-button ss-c-button--outline">One</button>
            <button class="ss-c-button ss-c-button--outline">Two</button>
            <button class="ss-c-button ss-c-button--outline">Three</button>
        </div>

Mixed Variants

HTML 
<div class="ss-c-button-group" role="group" aria-label="Mixed group">
            <button class="ss-c-button ss-c-button--success">Approve</button>
            <button class="ss-c-button ss-c-button--warning">Review</button>
            <button class="ss-c-button ss-c-button--danger">Reject</button>
        </div>

Vertical Button Group

Stack buttons vertically instead of horizontally.

Basic Vertical

HTML 
<div
            class="ss-c-button-group ss-c-button-group--vertical"
            role="group"
            aria-label="Vertical group"
        >
            <button class="ss-c-button">Top</button>
            <button class="ss-c-button">Middle</button>
            <button class="ss-c-button">Bottom</button>
        </div>

Vertical Menu Style

HTML 
<div
            class="ss-c-button-group ss-c-button-group--vertical"
            role="group"
            aria-label="Menu"
        >
            <button class="ss-c-button ss-c-button--outline">Dashboard</button>
            <button class="ss-c-button ss-c-button--outline">Settings</button>
            <button class="ss-c-button ss-c-button--outline">Profile</button>
            <button class="ss-c-button ss-c-button--outline">Logout</button>
        </div>

Button Group Sizes

Button groups in different sizes.

Size Variations

HTML 
<div class="ss-c-button-group ss-c-mb--02" role="group" aria-label="Small group">
            <button class="ss-c-button ss-c-button--sm">Small</button>
            <button class="ss-c-button ss-c-button--sm">Small</button>
            <button class="ss-c-button ss-c-button--sm">Small</button>
        </div>

        <div
            class="ss-c-button-group ss-c-mb--02"
            role="group"
            aria-label="Default group"
        >
            <button class="ss-c-button">Default</button>
            <button class="ss-c-button">Default</button>
            <button class="ss-c-button">Default</button>
        </div>

        <div class="ss-c-button-group" role="group" aria-label="Large group">
            <button class="ss-c-button ss-c-button--lg">Large</button>
            <button class="ss-c-button ss-c-button--lg">Large</button>
            <button class="ss-c-button ss-c-button--lg">Large</button>
        </div>

Split Button

Button with a dropdown toggle for additional actions.

Split Button Dropdown

HTML 
<div class="ss-c-button-group" role="group" aria-label="Split button">
            <button class="ss-c-button ss-c-button--primary">Save</button>
            <button
                class="ss-c-button ss-c-button--primary ss-c-button--icon"
                aria-label="More options"
            >
                ▼
            </button>
        </div>

Toggle Button Group

Button group for selecting options.

Single Selection

HTML 
<div
            class="ss-c-button-group ss-c-button-group--toggle"
            role="group"
            aria-label="View mode"
        >
            <button class="ss-c-button ss-c-button--active" aria-pressed="true">
                List
            </button>
            <button class="ss-c-button" aria-pressed="false">Grid</button>
            <button class="ss-c-button" aria-pressed="false">Table</button>
        </div>

Multiple Selection

HTML 
<div
            class="ss-c-button-group ss-c-button-group--toggle"
            role="group"
            aria-label="Text formatting"
        >
            <button class="ss-c-button ss-c-button--active" aria-pressed="true">
                <strong>B</strong>
            </button>
            <button class="ss-c-button" aria-pressed="false"><em>I</em></button>
            <button class="ss-c-button ss-c-button--active" aria-pressed="true">
                <u>U</u>
            </button>
        </div>

Toolbar

Multiple button groups combined into a toolbar.

Editor Toolbar

HTML 
<div class="ss-c-toolbar" role="toolbar" aria-label="Editor toolbar">
            <div
                class="ss-c-button-group"
                role="group"
                aria-label="File operations"
            >
                <button class="ss-c-button">New</button>
                <button class="ss-c-button">Open</button>
                <button class="ss-c-button">Save</button>
            </div>
            <div
                class="ss-c-button-group"
                role="group"
                aria-label="Edit operations"
            >
                <button class="ss-c-button">Cut</button>
                <button class="ss-c-button">Copy</button>
                <button class="ss-c-button">Paste</button>
            </div>
            <div class="ss-c-button-group" role="group" aria-label="Format">
                <button class="ss-c-button"><strong>B</strong></button>
                <button class="ss-c-button"><em>I</em></button>
            </div>
        </div>