Button Component
The Button component is a versatile, accessible button element that suppo rts multiple variants, sizes, and states for various use cases in your application. rts multiple variants, sizes, and states for various use cases in your application.
Basic Usage
<Button>Click me</Button>
Code:
<Button>Click me</Button>
Variants
Primary (Default)
<Button variant='primary'>Primary Button</Button>
Secondary
<Button variant='secondary'>Secondary Button</Button>
Success
<Button variant='success'>Success Button</Button>
Warning
<Button variant='warning'>Warning Button</Button>
Danger
<Button variant='danger'>Danger Button</Button>
Ghost
<Button variant='ghost'>Ghost Button</Button>
Sizes
Extra Small
<Button size='xs'>Extra Small</Button>
Small
<Button size='sm'>Small</Button>
Medium (Default)
<Button size='md'>Medium</Button>
Large
<Button size='lg'>Large</Button>
Extra Large
<Button size='xl'>Extra Large</Button>
States
Loading State
<Button loading>Loading...</Button>
Disabled State
<Button disabled>Disabled</Button>
With Icons
Left Icon
<Button leftIcon=''>Launch</Button>
Right Icon
<Button rightIcon='→'>Continue</Button>
Full Width
<Button fullWidth>Full Width Button</Button>
Rounded Variant
<Button rounded>Rounded Button</Button>
Interactive Demo
Try clicking the buttons below to see them in action:
<div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}> <Button variant='primary' onClick={() => alert('Primary clicked!')}> Click Me </Button> <Button variant='secondary' onClick={() => alert('Secondary clicked!')}> Click Me </Button> <Button variant='success' onClick={() => alert('Success clicked!')}> Click Me </Button> <Button variant='warning' onClick={() => alert('Warning clicked!')}> Click Me </Button> <Button variant='danger' onClick={() => alert('Danger clicked!')}> Click Me </Button> </div>
API Reference
Props
| Prop | Type | Default | Description | | ------------------------------------------------------------------------- | ---------------------------- | | children | ReactNode | - | Button content | | variant | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'ghost' | 'primary' | Button style variant | | size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Button size | | loading | boolean | false | Shows loading spinner | | disabled | boolean | false | Disables the button | | leftIcon | string | - | Icon to display on the left | | rightIcon | string | - | Icon to display on the right | | fullWidth | boolean | false | Makes button full width | | rounded | boolean | false | Applies rounded corners | | onClick | (event: MouseEvent) => void | - | Click handler | | type | 'button' | 'submit' | 'reset' | 'button' | HTML button type | | className | string | - | Additional CSS classes |
CSS Classes
The Button component uses the following CSS classes:
.btn- Base button class.btn--{variant}- Variant-specific classes (e.g.,.btn--primary).btn--{size}- Size-specific classes (e.g.,.btn--lg).btn--loading- Loading state class.btn--disabled- Disabled state class.btn--full-width- Full width class.btn--rounded- Rounded variant class
Accessibility
- Proper ARIA labels and roles
- Keyboard navigation support
- Focus management
- Screen reader compatibility
- Loading state announcements
Best Practices
- Use semantic variants: Choose variants that match the button's purpose
- Provide clear labels: Button text should clearly indicate the action
- Handle loading states: Show loading indicators for async operations
- Consider button hierarchy: Use primary variants for main actions
- Test keyboard navigation: Ensure all buttons are accessible via keyboard
Implementation
Ready to use the Button component in your project?
- Install the package:
pnpm add @react-superadmin/web - Import and use:
// Component is available in the live scope
function MyComponent() {
return ; }
3. **Customize**: Use the props and variants shown above to match your design system