垦荒学园

English

简体中文

English

简体中文

Toggle theme

Foundation Button Groups ​

Button groups allow you to group multiple related buttons together into a compact button collection. This chapter covers various uses of Foundation button groups.

Basic Button Group ​

Use the .button-group class to create a basic button group:

html
<div class="button-group">
    <a class="button">First</a>
    <a class="button">Second</a>
    <a class="button">Third</a>
</div>

Button Group Colors ​

Button groups can apply all standard button colors:

html
<!-- Primary button group -->
<div class="button-group primary">
    <a class="button">Button 1</a>
    <a class="button">Button 2</a>
    <a class="button">Button 3</a>
</div>

<!-- Secondary button group -->
<div class="button-group secondary">
    <a class="button">Button 1</a>
    <a class="button">Button 2</a>
    <a class="button">Button 3</a>
</div>

<!-- Success button group -->
<div class="button-group success">
    <a class="button">Button 1</a>
    <a class="button">Button 2</a>
    <a class="button">Button 3</a>
</div>

<!-- Warning button group -->
<div class="button-group warning">
    <a class="button">Button 1</a>
    <a class="button">Button 2</a>
    <a class="button">Button 3</a>
</div>

<!-- Alert button group -->
<div class="button-group alert">
    <a class="button">Button 1</a>
    <a class="button">Button 2</a>
    <a class="button">Button 3</a>
</div>

Mixed Colors ​

You can also specify different colors for individual buttons:

html
<div class="button-group">
    <a class="button primary">Primary</a>
    <a class="button secondary">Secondary</a>
    <a class="button success">Success</a>
    <a class="button alert">Alert</a>
</div>

Button Group Sizes ​

Button groups support different sizes:

html
<!-- Tiny size -->
<div class="button-group tiny">
    <a class="button">Tiny 1</a>
    <a class="button">Tiny 2</a>
    <a class="button">Tiny 3</a>
</div>

<!-- Small size -->
<div class="button-group small">
    <a class="button">Small 1</a>
    <a class="button">Small 2</a>
    <a class="button">Small 3</a>
</div>

<!-- Default size -->
<div class="button-group">
    <a class="button">Default 1</a>
    <a class="button">Default 2</a>
    <a class="button">Default 3</a>
</div>

<!-- Large size -->
<div class="button-group large">
    <a class="button">Large 1</a>
    <a class="button">Large 2</a>
    <a class="button">Large 3</a>
</div>

Expanded Button Group ​

Use the .expanded class to make the button group fill the full width of its container:

html
<div class="button-group expanded">
    <a class="button">Button 1</a>
    <a class="button">Button 2</a>
    <a class="button">Button 3</a>
</div>

Buttons automatically divide the width equally.

Stacked Button Group ​

Use the .stacked class to stack buttons vertically:

html
<div class="button-group stacked">
    <a class="button">First Row</a>
    <a class="button">Second Row</a>
    <a class="button">Third Row</a>
</div>

Responsive Stacking ​

Stack on small screens, display horizontally on large screens:

html
<div class="button-group stacked-for-small">
    <a class="button">Button 1</a>
    <a class="button">Button 2</a>
    <a class="button">Button 3</a>
</div>

Available responsive stacking classes:

  • .stacked-for-small - Stack on small screens
  • .stacked-for-medium - Stack on medium screens and below

Hollow Button Group ​

Combine with the .hollow class to create hollow button groups:

html
<div class="button-group hollow">
    <a class="button">Button 1</a>
    <a class="button">Button 2</a>
    <a class="button">Button 3</a>
</div>

<div class="button-group hollow primary">
    <a class="button">Primary 1</a>
    <a class="button">Primary 2</a>
    <a class="button">Primary 3</a>
</div>

Clear Style Button Group ​

Use the .clear class to create transparent button groups:

html
<div class="button-group clear">
    <a class="button primary">Button 1</a>
    <a class="button primary">Button 2</a>
    <a class="button primary">Button 3</a>
</div>

Split Button ​

Split buttons consist of a main button and a dropdown trigger:

html
<div class="button-group">
    <a class="button">Save</a>
    <button class="dropdown button arrow-only" data-toggle="save-dropdown">
        <span class="show-for-sr">Show More Options</span>
    </button>
</div>

<div class="dropdown-pane" id="save-dropdown" data-dropdown data-auto-focus="true">
    <ul class="menu vertical">
        <li><a href="#">Save As...</a></li>
        <li><a href="#">Save Copy</a></li>
        <li><a href="#">Export</a></li>
    </ul>
</div>

Toolbar Style Button Group ​

Create toolbar-style button groups:

html
<div class="button-group">
    <a class="button secondary" aria-label="Bold">
        <strong>B</strong>
    </a>
    <a class="button secondary" aria-label="Italic">
        <em>I</em>
    </a>
    <a class="button secondary" aria-label="Underline">
        <u>U</u>
    </a>
</div>

<div class="button-group">
    <a class="button secondary" aria-label="Align Left">
        <i class="fa fa-align-left"></i>
    </a>
    <a class="button secondary" aria-label="Align Center">
        <i class="fa fa-align-center"></i>
    </a>
    <a class="button secondary" aria-label="Align Right">
        <i class="fa fa-align-right"></i>
    </a>
    <a class="button secondary" aria-label="Justify">
        <i class="fa fa-align-justify"></i>
    </a>
</div>

Button Group Toggle ​

Create single-select or multi-select toggle button groups:

Single Select Toggle ​

html
<div class="button-group" role="group" aria-label="View Toggle">
    <button class="button is-active" type="button">List View</button>
    <button class="button" type="button">Grid View</button>
    <button class="button" type="button">Detail View</button>
</div>

<style>
    .button-group .button.is-active {
        background-color: #1468a0;
    }
</style>

<script>
    document.querySelectorAll('.button-group .button').forEach(button => {
        button.addEventListener('click', function() {
            this.parentNode.querySelectorAll('.button').forEach(btn => {
                btn.classList.remove('is-active');
            });
            this.classList.add('is-active');
        });
    });
</script>

Multi Select Toggle ​

html
<div class="button-group" role="group" aria-label="Feature Selection">
    <button class="button hollow" type="button" data-toggle-btn>Feature A</button>
    <button class="button hollow" type="button" data-toggle-btn>Feature B</button>
    <button class="button hollow" type="button" data-toggle-btn>Feature C</button>
</div>

<script>
    document.querySelectorAll('[data-toggle-btn]').forEach(button => {
        button.addEventListener('click', function() {
            this.classList.toggle('hollow');
        });
    });
</script>

Multiple Button Groups ​

Use grid layout to organize multiple button groups:

html
<div class="grid-x grid-padding-x">
    <div class="cell small-6 medium-4">
        <div class="button-group expanded">
            <a class="button">Edit</a>
            <a class="button">Copy</a>
        </div>
    </div>
    <div class="cell small-6 medium-4">
        <div class="button-group expanded">
            <a class="button success">Save</a>
            <a class="button warning">Undo</a>
        </div>
    </div>
    <div class="cell small-12 medium-4">
        <div class="button-group expanded">
            <a class="button alert">Delete</a>
        </div>
    </div>
</div>

Complete Example ​

html
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation Button Groups Example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        .demo-section {
            margin-bottom: 30px;
            padding: 20px;
            background: #f4f4f4;
            border-radius: 4px;
        }
        .demo-section h3 {
            margin-bottom: 15px;
            border-bottom: 1px solid #ddd;
            padding-bottom: 10px;
        }
        .button-group.is-active-group .button.is-active {
            background-color: #1468a0;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <h1>Foundation Button Groups Showcase</h1>

        <div class="demo-section">
            <h3>Basic Button Group</h3>
            <div class="button-group">
                <a class="button">First</a>
                <a class="button">Second</a>
                <a class="button">Third</a>
            </div>
        </div>

        <div class="demo-section">
            <h3>Different Colors</h3>
            <div class="button-group primary">
                <a class="button">Primary 1</a>
                <a class="button">Primary 2</a>
                <a class="button">Primary 3</a>
            </div>
            <br>
            <div class="button-group success">
                <a class="button">Success 1</a>
                <a class="button">Success 2</a>
                <a class="button">Success 3</a>
            </div>
        </div>

        <div class="demo-section">
            <h3>Different Sizes</h3>
            <div class="button-group tiny">
                <a class="button">Tiny</a>
                <a class="button">Tiny</a>
                <a class="button">Tiny</a>
            </div>
            <br>
            <div class="button-group small">
                <a class="button">Small</a>
                <a class="button">Small</a>
                <a class="button">Small</a>
            </div>
            <br>
            <div class="button-group large">
                <a class="button">Large</a>
                <a class="button">Large</a>
                <a class="button">Large</a>
            </div>
        </div>

        <div class="demo-section">
            <h3>Expanded Button Group</h3>
            <div class="button-group expanded">
                <a class="button">Equal Width 1</a>
                <a class="button">Equal Width 2</a>
                <a class="button">Equal Width 3</a>
            </div>
        </div>

        <div class="demo-section">
            <h3>Hollow Button Group</h3>
            <div class="button-group hollow primary">
                <a class="button">Hollow 1</a>
                <a class="button">Hollow 2</a>
                <a class="button">Hollow 3</a>
            </div>
        </div>

        <div class="demo-section">
            <h3>Stacked Button Group</h3>
            <div class="button-group stacked">
                <a class="button">First Row</a>
                <a class="button">Second Row</a>
                <a class="button">Third Row</a>
            </div>
        </div>

        <div class="demo-section">
            <h3>Toolbar Style</h3>
            <div class="button-group secondary">
                <a class="button" aria-label="Bold"><i class="fas fa-bold"></i></a>
                <a class="button" aria-label="Italic"><i class="fas fa-italic"></i></a>
                <a class="button" aria-label="Underline"><i class="fas fa-underline"></i></a>
            </div>
            &nbsp;
            <div class="button-group secondary">
                <a class="button" aria-label="Align Left"><i class="fas fa-align-left"></i></a>
                <a class="button" aria-label="Align Center"><i class="fas fa-align-center"></i></a>
                <a class="button" aria-label="Align Right"><i class="fas fa-align-right"></i></a>
            </div>
        </div>

        <div class="demo-section">
            <h3>Toggle Button Group</h3>
            <div class="button-group is-active-group" id="view-toggle">
                <button class="button is-active" type="button">List</button>
                <button class="button" type="button">Grid</button>
                <button class="button" type="button">Detail</button>
            </div>
        </div>

        <div class="demo-section">
            <h3>Split Button</h3>
            <div class="button-group">
                <a class="button">Main Action</a>
                <button class="dropdown button arrow-only" type="button" data-toggle="split-dropdown">
                    <span class="show-for-sr">More Options</span>
                </button>
            </div>
            <div class="dropdown-pane" id="split-dropdown" data-dropdown>
                <ul class="menu vertical">
                    <li><a href="#">Option 1</a></li>
                    <li><a href="#">Option 2</a></li>
                    <li><a href="#">Option 3</a></li>
                </ul>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
    <script>
        $(document).foundation();

        // Toggle button group logic
        document.querySelectorAll('#view-toggle .button').forEach(button => {
            button.addEventListener('click', function() {
                document.querySelectorAll('#view-toggle .button').forEach(btn => {
                    btn.classList.remove('is-active');
                });
                this.classList.add('is-active');
            });
        });
    </script>
</body>
</html>

Button Group Best Practices ​

  1. Semantic grouping: Only place related operations in the same button group
  2. Quantity control: It's recommended to have no more than 5 buttons in a button group
  3. Accessibility: Use role="group" and aria-label to provide context
  4. Responsive design: Use responsive stacking classes to adapt to different screens
  5. Visual consistency: Buttons within the same group should maintain consistent styling

Summary ​

In this chapter we learned:

  • How to create basic button groups
  • Button group colors and sizes
  • Expanded and stacked button groups
  • Hollow and clear style button groups
  • Split buttons and toolbar styles
  • Implementing toggle button groups

Next chapter, we will learn Foundation Icons.

Tip: Button groups are perfect for scenarios like pagination, toolbars, and view toggling.

Content is for learning and research only.

Copyright 2026 Kenhuang Academy. All Rights Reserved. About