ToggleButton

Basic toggle buttons allow users to make multiple selections easily, with each button’s state reflecting whether it is selected. For example, in text formatting, users can choose "Bold," "Italic," or "Underline" simultaneously to customize their text. The selected states are stored in an array, making it simple to manage and apply changes dynamically. This ensures seamless functionality and a polished user experience.

With exclusive selection, only one option can be selected at a time. This is useful in scenarios where mutually exclusive choices are required, such as selecting a single alignment for text (e.g., "Left," "Center," or "Right"). The `exclusive` prop ensures that toggling one button automatically deselects the others, maintaining clarity and consistency in user inputs.

Toggle buttons can be stacked vertically by setting the orientation prop to "vertical." This layout is ideal for menus, settings panels, or options where vertical alignment improves readability and ease of access. Vertical toggle groups are particularly helpful on smaller screens or mobile devices, ensuring options remain accessible without compromising on space.

The ToggleButtonGroup component supports different sizes to match the design requirements of your application. Available sizes include "small," "medium" (default), and "large." By adjusting the size, you can ensure that buttons are appropriately scaled for their context, whether it's a compact toolbar or a full-screen settings menu.

All toggle buttons within a group can be disabled by setting the `disabled` prop on the `ToggleButtonGroup` component. This is useful in scenarios where selections should be temporarily or permanently unavailable to users, such as when certain features are restricted or conditions are not met for using them.

Toggle buttons can be styled with different colors using the `color` prop. Available options include "primary" and "secondary," among others, depending on your theme configuration. This customization helps to visually differentiate buttons, emphasizing their purpose and improving user interaction.