Overview
The Button component is a foundational interactive element that triggers actions when clicked. It supports multiple visual styles, sizes, and states.
Basic Usage
import { Button } from '@yourproject/components';
function Example() {
return <Button>Click Me</Button>;
}
Variants
The Button component supports multiple visual variants:
Primary
Secondary
Tertiary
Danger
<Button variant="primary">
Primary Action
</Button>
<Button variant="secondary">
Secondary Action
</Button>
<Button variant="tertiary">
Tertiary Action
</Button>
<Button variant="danger">
Delete Item
</Button>
Sizes
Buttons come in four sizes to fit different use cases:
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
<Button size="xl">Extra Large</Button>
The default size is md if not specified.
States
Disabled State
<Button disabled>
Disabled Button
</Button>
Loading State
<Button loading>
Processing...
</Button>
Full Width
<Button fullWidth>
Full Width Button
</Button>
Props
Visual style variant: primary, secondary, tertiary, or danger
Button size: sm, md, lg, or xl
Whether the button is disabled and cannot be interacted with
Shows a loading spinner and prevents interaction
Makes the button expand to fill its container width
Click event handler: (event: React.MouseEvent) => void
HTML button type: button, submit, or reset
The content to display inside the button
Additional CSS class names to apply
Optional icon to display before the button text
TypeScript Interface
interface ButtonProps {
variant?: 'primary' | 'secondary' | 'tertiary' | 'danger';
size?: 'sm' | 'md' | 'lg' | 'xl';
disabled?: boolean;
loading?: boolean;
fullWidth?: boolean;
onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
type?: 'button' | 'submit' | 'reset';
children: React.ReactNode;
className?: string;
icon?: React.ReactNode;
}
Advanced Examples
import { Button } from '@yourproject/components';
import { ChevronRight } from 'lucide-react';
function Example() {
return (
<Button icon={<ChevronRight />}>
Continue
</Button>
);
}
import { Button } from '@yourproject/components';
import { useState } from 'react';
function Example() {
const [loading, setLoading] = useState(false);
const handleClick = async () => {
setLoading(true);
await saveData();
setLoading(false);
};
return (
<Button
loading={loading}
onClick={handleClick}
>
Save Changes
</Button>
);
}
Use the loading prop with async operations to provide visual feedback to users.
Accessibility
- Supports keyboard navigation (Enter and Space keys)
- Includes proper ARIA attributes when disabled or loading
- Maintains focus management for keyboard users
- Color contrast meets WCAG AA standards