- The `aria-label` prop is required. - This is a controlled component that requires `value` and `onChange` props to control its state.

The `variant` prop is used to set the variant of the toggle button.

- `default`: default variant - `secondary`: secondary variant - `highlight`: highlight variant

The `tooltip` prop is used to show a tooltip when the toggle button is hovered.

- The `aria-label` will be used as the tooltip's content if the content type is string.

Group: Demonstrates the ToggleGroup component for managing related toggle buttons.

Features:

- Single selection mode (multiple=false): Only one button can be pressed at a time - Multiple selection mode (multiple=true): Multiple buttons can be pressed simultaneously - Automatic state management across the group - Keyboard navigation with arrow keys - Support for controlled and uncontrolled modes

Usage Guidelines:

- Use ToggleGroup for related toggle buttons that share state - Use single selection mode for mutually exclusive options - Use multiple selection mode for independent options - Provide aria-label for each ToggleGroup.Item

GroupOrientation: Demonstrates ToggleGroup with different orientations.

Features:

- Horizontal orientation (default): Buttons arranged in a row - Vertical orientation: Buttons arranged in a column - Keyboard navigation adapts to orientation (arrow keys)

GroupControlled: Demonstrates controlled and uncontrolled ToggleGroup.

Features:

- Controlled mode: Use `value` and `onChange` props - Uncontrolled mode: Use `defaultValue` prop - Both modes support the same features

GroupDisabled: Demonstrates ToggleGroup with disabled state.

Features:

- Group-level disabled: All buttons in the group are disabled - Individual disabled: Specific buttons can be disabled while others remain enabled