Toggle Button
The ToggleButton and ToggleButtonGroup are versatile components that can be used for a wide range of applications. Their intuitive design ensures users can make selections easily and confidently. Whether it's enabling a setting, selecting a mode, or choosing multiple options, these components are built to enhance user experience across different scenarios.
Functionality
The ToggleButton and ToggleButtonGroup components provide an efficient way to handle user interactions for toggling states or selecting one or multiple options. Below are some common use cases.
Exclusive Selection
Use an exclusive ToggleButtonGroup when only one selection is allowed at a time. This is useful for scenarios like aligning text to the left, center, or right.
Multiple Selection
Enable multiple selections within a ToggleButtonGroup for cases where users need to toggle multiple options, such as enabling bold, italic, and underline text styling simultaneously.
Sizes
Adjust the size of the ToggleButton using the size prop. This property supports small, medium, and large values to suit various design requirements.
Colors
Use the color prop to style the ToggleButtonGroup with pre-defined theme colors, such as primary or secondary. This ensures consistency across the application.
Vertical Orientation
The orientation prop allows you to arrange toggle buttons vertically instead of horizontally. This is ideal for menus or options requiring more vertical space.
