MUI Button Groups - Example & Tutorial

Please refer to MUI's official docs for more details on component's usage guide and API documentation.

Basic Button Group

Use variant={'outlined' | 'contained' | 'text'} prop with <ButtonGroup> component for button groups.

---

Button Group Sizes

Use size={'small' | 'medium' | 'large'} prop with <ButtonGroup> component for different sizes of button groups.

---

Vertical Button Group

Use orientation='vertical' prop with <ButtonGroup> component for vertical button groups.

---

Split Button

ButtonGroup can also be used to create a split button. The dropdown can change the button action (as in this example), or be used to immediately trigger a related action.

---

Button Group Colors

Use color prop for different colored button-groups.

---

Toggle Button

Please refer to MUI's official docs for more details on component's usage guide and API documentation.

Basic Toggle Button

Manage value prop with <ToggleButtonGroup> component with the help of a state and use exclusive prop with <ToggleButtonGroup> component for single toggle.

---

Multiple Toggle Button

Manage value prop with the help of a state with array.

---

Toggle Button Sizes

Use size={'size' | 'large'} prop for different sizes.

---

Vertical Toggle Button

Use orientation='vertical' prop for vertical toggle button.

---

Enforce Value Set

Use if statement in handle function in onChange prop.

Exclusive Selection

Multiple Selection

---

Customized Toggle Button

Use styled hook to customize your toggle button.

---

Toggle Button Colors

Use color prop for different colored toggle-buttons.

---