> For the complete documentation index, see [llms.txt](https://2600hz.gitbook.io/sds/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://2600hz.gitbook.io/sds/sds-3.0/sds-components/components/buttongroup.md).

# ButtonGroup

A "Button Group" component is a user interface element used to group a collection of buttons together in a visually cohesive manner. It provides a convenient way to present related actions or options.

### **Use Cases:** 

✅ Grouping related actions: Use the "Button Group" component to visually group buttons that perform related actions, helping users quickly identify and interact with available options.

✅ Compact layout: "Button Group" components offer a space-efficient way to present multiple actions or options side by side, reducing visual clutter and improving the user interface.

✅ Single-selection controls: Utilize "Button Group" components to create sets of mutually exclusive buttons, such as radio buttons or segmented controls, where only one button can be selected at a time.

✅ Toggleable controls: "Button Group" components can also be used for toggleable options, where users can select or deselect buttons to toggle specific states or filters.

### **Not to Use Cases:** 

❌ Using "Button Group" for unrelated actions: Avoid grouping buttons together that have no meaningful relationship or similarity in function. Users may become confused by unrelated actions presented as a group.

❌ Overloading with too many buttons: Keep the number of buttons within a "Button Group" reasonable to maintain a clean and usable interface. An excessive number of buttons can overwhelm users.

❌ Mixing single-selection and toggleable controls: Do not mix single-selection buttons (like radio buttons) with toggleable buttons (like checkboxes) within the same "Button Group," as this can lead to confusion.

❌ Ignoring responsive design: Ensure that the "Button Group" component adapts well to different screen sizes and orientations to maintain usability across devices.

<br>