Description
Context:
We are using blue badges within tab headers to display dynamic values (coverage percentage and utilization percentage) alongside the tab label. The badges provide at-a-glance metrics that help users understand the content of each tab before clicking into it.
Current Behavior:
When a user hovers over a tab that contains a badge, the tab label responds with a hover style, but the badge itself does not reflect any hover state. This creates an inconsistent interaction where part of the tab header appears interactive and part does not, making the component feel unresponsive or broken.
Expected Behavior:
The badge should inherit or complement the tab's hover state when placed inside a tab header. When the user hovers over the tab, the badge should visually respond (e.g., subtle background shift or opacity change) to indicate it is part of the clickable tab area.
Customer Benefit:
Customers using the Purchase Analyzer rely on the coverage and utilization badges to quickly assess their savings plan performance before diving into detailed analysis. A proper hover state reinforces that these metrics are interactive and tied to actionable content, reducing hesitation and confusion during navigation. Without it, customers may second-guess whether the tab is clickable or assume the UI is malfunctioning, which erodes trust in the tool. A polished, responsive interaction builds confidence that the data they are viewing is reliable and that the product is well-maintained, ultimately encouraging deeper engagement with savings recommendations.
Impact:
- Users perceive the tab as partially broken during interaction
- Reduces the polished feel of the interface
- Creates a disconnect between the interactive affordance of the tab and the static appearance of the badge
- User feedback from testing has been positive on the badge placement itself, so we want to preserve the pattern while improving the interaction quality
Proposed Solution:
Add a hover style variant for the badge component when nested inside interactive containers (e.g., tabs). This could be a subtle visual shift that signals the badge is part of the parent's interactive area.
Code of Conduct
Description
Context:
We are using blue badges within tab headers to display dynamic values (coverage percentage and utilization percentage) alongside the tab label. The badges provide at-a-glance metrics that help users understand the content of each tab before clicking into it.
Current Behavior:
When a user hovers over a tab that contains a badge, the tab label responds with a hover style, but the badge itself does not reflect any hover state. This creates an inconsistent interaction where part of the tab header appears interactive and part does not, making the component feel unresponsive or broken.
Expected Behavior:
The badge should inherit or complement the tab's hover state when placed inside a tab header. When the user hovers over the tab, the badge should visually respond (e.g., subtle background shift or opacity change) to indicate it is part of the clickable tab area.
Customer Benefit:
Customers using the Purchase Analyzer rely on the coverage and utilization badges to quickly assess their savings plan performance before diving into detailed analysis. A proper hover state reinforces that these metrics are interactive and tied to actionable content, reducing hesitation and confusion during navigation. Without it, customers may second-guess whether the tab is clickable or assume the UI is malfunctioning, which erodes trust in the tool. A polished, responsive interaction builds confidence that the data they are viewing is reliable and that the product is well-maintained, ultimately encouraging deeper engagement with savings recommendations.
Impact:
Proposed Solution:
Add a hover style variant for the badge component when nested inside interactive containers (e.g., tabs). This could be a subtle visual shift that signals the badge is part of the parent's interactive area.
Code of Conduct