Standalone Toggle Buttons: A New UI Option

Have you ever been working with a web interface and wished you could have a button that just... toggled? Not as part of a group where you pick one from many, but as a standalone control that shows its on or off state? If so, you're not alone! This is exactly the kind of user experience enhancement that the Pharos design system is exploring, and it centers around the idea of individual toggle button functionality, not just in groups. It might sound like a small change, but it opens up a world of possibilities for more intuitive and dynamic user interfaces.

The Problem: Limited Button Flexibility

Currently, the toggle-button-group component in Pharos is fantastic for situations where you need to select one option from a set. Think of it like a set of radio buttons – you click one, and the others become unselected. This is incredibly useful for things like choosing a sorting order or selecting a preferred display mode. However, there are many common UI patterns where this group behavior just doesn't fit. One of the most prominent examples is in a What You See Is What You Get (WYSIWYG) editor. Imagine you're typing up a document, and you want to make a piece of text bold. You'd expect to click a "Bold" button, see that button light up or change visually to indicate it's active, and then click it again to turn the bold formatting off. The toggle-button-group doesn't quite serve this purpose because its core logic is about mutual exclusivity within a group, not about toggling a single, independent state.

This limitation was brought to light in GitHub issue #995, sparking a discussion among the Pharos maintainers. The core of the problem is that while the existing toggle-button-group is great for selection sets, it doesn't cater to the need for independent toggle buttons. The initial thought might be to add this functionality to the base button component itself. However, upon deeper investigation and collaborative discussion, the team realized that this could potentially overcomplicate the base button component, making it harder to maintain and potentially introducing unintended side effects. Furthermore, ensuring the correct accessibility considerations for a single toggling button within the broader button component's context could become a tangled web. The goal is to keep components focused and maintainable, and adding a new, distinct behavior like independent toggling to an already robust component might not be the cleanest approach. This is where the idea of a separate toggle-button component emerged as a more elegant and maintainable solution, ensuring that accessibility and specific styling for toggling behavior could be addressed independently and effectively.

The Solution: Unlocking the Standalone Toggle Button

To address the need for individual toggle button functionality, not just in groups, the Pharos team has devised a smart and efficient solution: exporting the existing internal toggle-button component. You see, within the toggle-button-group component, there's already a specialized toggle-button at play. This internal component, which itself extends from the base Pharos button, is perfectly suited for the task of managing a single toggling state. Instead of reinventing the wheel or cluttering the base button component, the plan is to make this existing, functional toggle-button available for direct use. This is a significant advantage because the component already exists, has been developed with specific toggling behavior in mind, and benefits from being built upon the established Pharos button foundation. This approach ensures that we leverage existing code and design patterns, promoting consistency and reducing development effort.

Beyond simply making the component available, there are a couple of crucial adjustments needed. Firstly, the styles of these standalone toggle buttons will need to be refined to align with the design envisioned in issue #995. This means ensuring they look and feel right when used outside of a group context, providing clear visual feedback for their selected or unselected state. Secondly, and critically, the team will meticulously review and adjust all usage scenarios – both when the toggle-button is used within a group and when it stands alone – to guarantee that the component remains fully accessible. Accessibility is paramount in Pharos, and ensuring that users with disabilities can interact with these new toggle buttons effectively is a non-negotiable aspect of this enhancement. By exporting and refining this internal component, Pharos is set to offer a powerful and flexible tool for creating more dynamic and user-friendly interfaces, truly enabling individual toggle button functionality.

Alternatives Considered: Why Not a Switch?

When exploring options for individual toggle button functionality, not just in groups, it's natural to consider existing components that might offer similar capabilities. The switch component in Pharos, for instance, comes to mind. Both switches and toggle buttons can, in essence, perform an action that results in an