Button

Alpha

An accessible button component with multiple variants, sizes, loading state, and proper ARIA attributes.

Import

import { Button } from "@compa11y/react";

Usage

Example.tsx

import { Button } from "@compa11y/react";

function Example() {
  return (
    <div style={{ display: "flex", gap: "8px" }}>
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="danger">Danger</Button>
      <Button loading>Loading...</Button>
    </div>
  );
}

Features

Multiple variants: primary, secondary, danger, outline, ghost
Three sizes: sm, md, lg
Loading state with aria-busy
Disabled state with proper aria-disabled
CSS variable customization
forwardRef support

Props

Button component props
Prop	Type	Default	Description
`variant`	`'primary' \| 'secondary' \| 'danger' \| 'outline' \| 'ghost'`	`'primary'`	Visual style variant
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Button size
`loading`	`boolean`	`false`	Shows loading indicator and sets aria-busy
`disabled`	`boolean`	`false`	Disables the button
`unstyled`	`boolean`	`false`	Removes all default styles
`children`*	`ReactNode`	-	Button content

Keyboard Interactions

Accessibility

All keyboard interactions follow WAI-ARIA best practices and work without any additional configuration.

Keyboard shortcuts for Button
Key	Action
`Enter`	Activates the button
`Space`	Activates the button

CSS Customization

Override these CSS custom properties to customize the appearance.

CSS custom properties for Button
Variable	Description	Default
`--compa11y-button-radius`	Border radius	`6px`
`--compa11y-button-primary-bg`	Primary variant background	`#0d9488`
`--compa11y-button-primary-text`	Primary variant text color	`#ffffff`