Buttons & Links
WCAG-compliant React Button component. Guaranteed contrast ratios, 44px touch targets, and visible focus indicators.
The Button component is designed to solve common WCAG failures automatically. It enforces color contrast ratios and minimum touch target sizes (44x44px).
✨ New in v1.2.3
Small size now meets 44px touch target – All button sizes now comply with EN 301 549 § 9.2.5.5 (Pointer Target Size). Previously, small buttons could be under 44px; this has been fixed.
Regulatory Context
Audits frequently fail buttons for poor contrast (WCAG 1.4.3) or missing focus indicators (WCAG 2.4.7). In strict environments (like public sector), "ghost buttons" without borders often fail Non-text Contrast (1.4.11). This component guarantees satisfying all these criteria by default.
Compliance Features
- WCAG 1.4.3: Pre-validated contrast ratios for all variants.
- WCAG 2.4.7: High-visibility focus indicators.
- EN 301 549 § 9.2.5.5: Minimum touch target size (44px) for all sizes.
Example Usage
import { Button } from '@holmdigital/components'; export const MyForm = () => ( <Button variant="primary" onClick={() => submit()} isLoading={isSubmitting} > Submit Form </Button> );Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'primary' | 'secondary' | 'ghost' | 'danger' | 'primary' | Visual style. All variants maintain accessible contrast. |
| isLoading | boolean | false | Shows loading spinner and disables interaction. Announces state to screen readers. |
| type | 'button' | 'submit' | 'reset' | 'button' | HTML button type. |