+ 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. +
++ Adjust the size of the `ToggleButton` using the `size` prop. + Supported values include `small`, `medium`, and `large`. +
++ 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. +
++ 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. +
++ 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. +
++ 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. +
++ Adjust the size of the `ToggleButton` using the `size` prop. This + property supports `small`, `medium`, and `large` values to suit + various design requirements. +
++ Use the `color` prop to style the `ToggleButtonGroup` with + pre-defined theme colors, such as `primary` or `secondary`. This + ensures consistency across the application. +
++ The `orientation` prop allows you to arrange toggle buttons + vertically instead of horizontally. This is ideal for menus or + options requiring more vertical space. +
++ 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. +
++ 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. +
+