### Basic Button Group

Group related buttons together in a horizontal row.

#### Simple Button Group

HTML

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

#### With Links

Previous Current Next
HTML

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

### Button Group Variants

Different visual styles for button groups.

#### Primary Group

HTML

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

#### Outline Group

HTML

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

#### Mixed Variants

HTML

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

### Vertical Button Group

Stack buttons vertically instead of horizontally.

#### Basic Vertical

HTML

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

#### Vertical Menu Style

HTML

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

### Button Group Sizes

Button groups in different sizes.

#### Size Variations

HTML

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

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

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

### Split Button

Button with a dropdown toggle for additional actions.

#### Split Button Dropdown

HTML

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

### Toggle Button Group

Button group for selecting options.

#### Single Selection

HTML

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

#### Multiple Selection

HTML

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

### Toolbar

Multiple button groups combined into a toolbar.

#### Editor Toolbar

HTML

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

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!