@sb/button

A versatile and accessible Button component for React web applications. Inspired by Material UI, this component provides multiple variants, sizes, and states out of the box.

Installation

npm install @sb/button

# or using yarn
yarn add @sb/button

# or using pnpm
pnpm add @sb/button

Features

• 🎨 Multiple variants: primary, secondary, ghost, ghostDark, cyan, withShadow
• 📐 Three size options: small, medium, large
• ♿ Fully accessible with proper ARIA labels and keyboard support
• 🚀 Loading state with spinner
• 🎯 Icon support with automatic sizing
• 🔧 Customizable via className and style props
• ✨ TypeScript support with full type definitions

Basic Usage

import { Button } from '@sb/button';

function App() {
  return (
    <Button 
      label="Click Me" 
      onClick={() => console.log('Clicked!')} 
    />
  );
}

Props

ButtonProps

| Prop | Type | Default | Description | |------|------|---------|-------------| | label | string \| ReactNode | required | Button text or content | | onClick | () => void | - | Click handler function | | variant | 'primary' \| 'secondary' \| 'ghost' \| 'ghostDark' \| 'cyan' \| 'withShadow' | 'primary' | Button style variant | | size | 'small' \| 'medium' \| 'large' | 'medium' | Button size | | disabled | boolean | false | Disable the button | | loading | boolean | false | Show loading spinner | | rounded | boolean | true | Add border radius | | icon | ReactNode | - | Icon element to display | | className | string | - | Additional CSS classes | | textStyle | string | - | CSS classes for the label text |

Examples

Variants

<Button label="Primary" variant="primary" />
<Button label="Secondary" variant="secondary" />
<Button label="Ghost" variant="ghost" />
<Button label="Ghost Dark" variant="ghostDark" />
<Button label="Cyan" variant="cyan" />
<Button label="With Shadow" variant="withShadow" />

Sizes

<Button label="Small" size="small" />
<Button label="Medium" size="medium" />
<Button label="Large" size="large" />

With Icon

import { Button } from '@sb/button';

const CheckIcon = (
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
  </svg>
);

<Button label="Confirm" icon={CheckIcon} />

Loading State

const [isLoading, setIsLoading] = useState(false);

return (
  <Button 
    label="Submit" 
    loading={isLoading}
    onClick={() => setIsLoading(true)}
  />
);

Disabled State

<Button label="Disabled" disabled />

Styling

The component uses CSS variables for theming. Ensure you have the required theme variables available:

• --color-buttonMainBackgroundColor
• --color-buttonMainHoverBackground
• --color-buttonMainDisabledBackgroundColor
• --color-primary
• And more theme variables for other variants

Custom Styling

<Button 
  label="Custom" 
  className="my-custom-class"
/>

Accessibility

• ✅ Semantic HTML with <button> element
• ✅ Proper ARIA labels
• ✅ Keyboard navigation support (Enter, Space)
• ✅ Focus management
• ✅ Screen reader friendly

Development

Local Development

npm run dev

Running Tests

npm run test
npm run test:watch
npm run test:coverage

Building

npm run build

Linting

npm run lint
npm run check-types

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT

Contributing

Contributions are welcome! Please read our contributing guidelines before submitting pull requests.