- Foundation Tutorial
- Foundation - Home
- Foundation - Overview
- Foundation - Installation
- Foundation - Starter Projects
- Foundation - Kitchen Sink
- Foundation General
- Foundation - Global Styles
- Foundation - Sass
- Foundation - JavaScript
- Foundation - JavaScript Utilities
- Foundation - Media Queries
- Foundation - The Grid
- Foundation - Flex Grid
- Foundation - Forms
- Foundation - Visibility Classes
- Foundation - Base Typography
- Foundation - Typography Helpers
- Foundation - Basic Controls
- Foundation - Navigation
- Foundation - Containers
- Foundation - Media
- Foundation - Plugins
- Foundation SASS
- Foundation - Sass Functions
- Foundation - Sass Mixins
- Foundation Libraries
- Foundation - Motion UI
- Foundation Useful Resources
- Foundation - Quick Guide
- Foundation - Useful Resources
- Foundation - Discussion
Foundation - Button Group
Description
They are containers for corresponding action elements. It works fine when a group of actions is displayed in a bar.
The following table lists the button group in Foundation
| Sr.No. | Button Group & Description |
|---|---|
| 1 | Basics
Any number of buttons can be placed inside a container by using .button-group. |
| 2 | Sizing
Sizing of the button groups can be done by using standard buttons. |
| 3 | Coloring
Each button in a button group can be colored individually or every button can be colored by using the same class. |
| 4 | Even width Group
The .expanded class can be used to make buttons full-width automatically. |
| 5 | Stacking
Buttons can be stacked by using .stacked class or .stack-for-small class for small screen only. |
| 6 | Split Buttons
To create split buttons, you must add .arrow-only class and create button groups of two buttons. |
| 7 | SASS Reference
You can change the styles of the components by using SASS Reference. |