component-button

You generate an accessible React button component by requesting a specific variant like primary or danger, which outputs a TSX file with SCSS styling. It automatically applies aria-disabled attributes and focus-visible states to ensure keyboard reachability and WCAG compliance.

The best way to add button variants like danger or outline is through data attributes and CSS variables. This approach generates token-driven styling hooks in your SCSS, allowing you to theme primary, secondary, destructive, text, and icon variants without altering the core component logic.

Yes, you can scaffold React buttons without adding new dependencies because the tool inlines disabled-state logic directly. It verifies your target integration, initializes a missing ui.tsx file, and writes standalone button.tsx and button.module.scss files into your project.

Your React button uses aria-disabled instead of the standard disabled attribute to maintain keyboard reachability for screen reader users. This approach keeps the button focusable while visually and functionally presenting a disabled state through inline logic and focus-visible styling.

Yes, this generator supports SCSS theming with CSS variables for different button sizes. It creates a matching SCSS module that uses data attributes to apply size and color tokens, enabling consistent variant styling across your React design system.