Button Component

A customizable and interactive button component with ripple effect and loading state.

Features

• Multiple variants: contained, outlined, and text
• Color options: primary (orange) and secondary (gray)
• Size options: small, medium, and large
• Disabled state with visual feedback
• Loading state with spinner animation
• Ripple effect on click
• Customizable via className and style props

Props

| Prop | Type | Default | Description | |-------------|-------------------------------------------|--------------|-----------------------------------------------------------------------------| | children | ReactNode | Required | Content to display inside the button. | | variant | "contained" | "outlined" | "text" | "contained" | Visual style of the button. | | color | "primary" | "secondary" | "primary" | Color scheme of the button. | | size | "small" | "medium" | "large" | "medium" | Size of the button. | | disabled | boolean | false | Whether the button is disabled. | | isLoading | boolean | false | Shows a loading spinner when true. | | onClick | (event: MouseEvent<HTMLButtonElement>) => void | Optional | Click handler function. | | className | string | Optional | Additional CSS classes to apply to the button. | | style | CSSProperties | Optional | Inline styles to apply to the button. | | type | "button" | "submit" | "reset" | "button" | HTML button type attribute. |

Usage

import Button from 'at-react-button-1';

function App() {
  return (
    <div>
      <Button 
        variant="contained" 
        color="primary" 
        onClick={() => console.log('Clicked!')}
      >
        Primary Button
      </Button>
      
      <Button 
        variant="outlined" 
        color="secondary" 
        size="large"
        className="my-custom-class"
      >
        Large Outlined Button
      </Button>
      
      <Button 
        variant="text" 
        disabled={true}
      >
        Disabled Text Button
      </Button>
      
      <Button isLoading={true}>
        Loading...
      </Button>
    </div>
  );
}