Foundation - Button Group



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.