Summary
In this second part of the series started with Styling Your First React Component — A Gentle Introduction, we transform a simple button into a small, configurable design system primitive using CSS Modules, CSS variables, and ergonomic React patterns. The approach is lightweight, accessible, and easy to maintain for small teams or custom projects.
What you will build
A Button component with support for size, variant, and loading and disabled states; light and dark theme support via CSS variables; accessible semantics and keyboard focus; and a minimal API reusable in custom applications and custom software.
Project setup
Use Vite with the React template and enable CSS Modules by naming styles as name.module.css. Keep components co-located to facilitate scalability. Suggested structure: src components Button Button.jsx Button.module.css App.jsx main.jsx theme.css. This organization facilitates reuse in AWS and Azure cloud services where you will deploy your custom applications.
Theme tokens with CSS variables
Define global variables in a theme file and import them from the app entry point. Declare spacing, radii, and base colors such as --bg --panel --text --brand, along with alternative values for the light theme. With these variables, you can visually change the entire interface by applying a single class to a main container, which speeds up theme creation for clients requiring custom software and personalized branding.
Button styles
Create a Button.module.css file that exposes a base class with local variables for background, foreground, and border. Add styles for hover, active, and focus-visible, as well as variants for primary, outline, and ghost. Define sm md lg sizes and disabled and loading states. Include a spinner animation with aria-hidden so screen readers do not duplicate the loading state announcement. This solution integrates easily into artificial intelligence and AI agent workflows that require consistent components across multiple views.
Button component in React
Design a small API that accepts props such as as, variant, size, loading, disabled, onClick, and href. Calculate isDisabled as disabled or loading and add aria-disabled when appropriate. When href is passed and the default component is button, render a link with a button role to maintain semantic consistency. Avoid passing onClick if the button is disabled. This ergonomics facilitates integration with enterprise applications that use business intelligence services and Power BI in dashboards where predictable interactions are required.
Component usage
Include the Button component in your App and show examples of variants, sizes, and states. To test themes, toggle the container class between theme-dark and theme-light. Adjust the --brand and --panel variables without changing JavaScript to align the appearance with each client's brand identity.
Accessibility checklist
Use focus-visible for keyboard focus rings, communicate disabled states with aria-disabled, ensure the spinner has aria-hidden, and maintain correct roles when a link behaves as a button. These practices are essential for custom software deliveries with corporate accessibility requirements.
One-line theming
Thanks to visual tokens living in CSS variables, you can change the entire theme by applying a single class to the root container. This speeds up A/B testing and customizations for clients using AWS and Azure cloud services and results in lower maintenance costs when delivering custom software.
Recommendations for moving forward
Extract tokens to a tokens.css file and generate light, dark, and system themes; add an icon slot prop that accepts React nodes to integrate iconography; create sibling components such as Input, Badge, and Toast using the same strategy to start a design system. If you work with artificial intelligence or AI agents, consider exposing extension points to control states from models and automations.
About Q2BSTUDIO
Q2BSTUDIO is a software development company specialized in custom applications and custom software. We offer complete solutions in artificial intelligence, AI for businesses, AI agents, and Power BI integration services for visualization and analysis. Additionally, we guarantee security through cybersecurity services and operate on cloud infrastructures with AWS and Azure cloud services. Our business intelligence services allow converting data into actionable decisions, combining development expertise with advanced AI capabilities for companies of any size.
Why choose us
If you need UI components that are quick to integrate into production projects, or want to develop a design system that coexists with artificial intelligence models and strict cybersecurity requirements, Q2BSTUDIO offers hands-on experience in agile deliveries, custom solutions, and technical consulting. We specialize in developing custom software, custom applications, and products deployed on AWS and Azure cloud services with attention to security and data governance.
Keywords and positioning
Custom applications custom software artificial intelligence cybersecurity AWS and Azure cloud services business intelligence services AI for businesses AI agents Power BI
Conclusion
You do not need a heavy library to have ergonomic and themeable components. CSS Modules and CSS variables keep everything portable and understandable. If you are interested in us adapting this pattern to your component catalog or want Q2BSTUDIO to develop a platform with artificial intelligence integration and cybersecurity services, contact our team for an initial consultation and a personalized work plan.
