Badge Button Component

[henryajisegiri]

Description

Implement the Badge Button component as defined in Figma. This is an interactive button that displays a badge icon token, used to allow users to interact with or select a badge.

Figma Link

Scope

Component Structure

Includes a badge icon token within an interactive button container.

States

• Default
• Hover
• Selected

Out of Scope

• Analytics event wiring

Acceptance Criteria

Component

• Badge Button renders correctly in default, hover, and selected states
• Badge icon uses the correct icon token
• Badge icon token is passed in via props
• Design tokens are used for spacing, border radius, and surface colours
• Component must be fully functional without JavaScript enabled. Refer to the install card implementation as a reference for the no-JS approach

Lookbook

• Badge Button is documented in Lookbook
• Demonstrates:
  • Default state
  • Hover state
  • Selected state
• Code snippets are provided

Accessibility and Analytics

• Button label — Must have an accessible label describing the badge (e.g. aria-label="Badge")
• Selected state — Must be communicated to screen readers via aria-pressed or aria-selected
• Analytics readiness — Component must allow analytics attributes or identifiers to be passed via props without internal modification

Dependencies / Assumptions

• Icon tokens for all badge types are available
• Figma is the source of truth for layout, sizing, and state styling

Definition of Done

• Badge Button component implemented and reusable
• All three states verified against Figma
• Token usage reviewed
• Lookbook documentation complete
• Task reviewed and approved

[kattyode]

QA Validation note: PASSED

Validated on: website-v2-qa https://www.cppal-dev.boost.org/v3/demo/components/#

The component is working as expected, and no issues were identified during testing.