Solaris Design System

Button Groups

Button groups are where multiple buttons are placed together in a component or a section.

There are two types of button groups horizontal and vertical

Horizontal button groups

Types Layout
Margin left/right: 4px
Standard
Primary and secondary		 horizontal primary and secondary btn group theme light horizontal primary and secondary btn group theme dark
Standard
Primary and secondary		 horizontal multiple buttons btn group theme light horizontal multiple buttons btn group theme dark

Vertical button groups

Types Layout
Margin left/right: 4px
Standard
Primary and secondary		 Vertical primary and secondary btn group theme light Vertical primary and secondary btn group theme dark
Standard
Primary and secondary		 Vertical multiple buttons btn group theme light Vertical multiple buttons btn group theme dark

Usage

Button groups are used when there are multiple buttons that are placed together to represent a group of possible actions. The most common type of button group is where there is a primary and secondary button placed together.

Always lead with the primary button if you are placing primary and secondary together.