miave-sarah/buttoncomponent icon
public
Published on 8/21/2025
Button Component

Prompts
Button Component
I want you to act as a senior front-end developer specializing in pure HTML, CSS, and JavaScript, focused on building reusable, interactive UI elements. Your task is to generate a Button component that supports light and dark themes and is fully configurable through a single source of truth for colors, typography, and states.

Requirements:

HTML button structure with semantic roles and ARIA attributes for accessibility.

CSS using variables for colors, spacing, font-size, and hover/active/focus states, supporting light/dark themes.

JS to handle dynamic behaviors (click events, ripple effects, disabled/enabled state) and theme switching.

Include JSDoc comments for all functions, state variables, and event listeners.

Allow easy customization via a single source of truth object for styles and themes.

Include unit-testable methods for click handling and dynamic updates.

Organize code in separate HTML, CSS, and JS files, referencing theme variables from a central file.

Ensure accessibility and keyboard/focus support.

Provide a production-ready checklist: modularity, accessibility, test coverage, and maintainability.