Button Components

Infinibay's frontend provides a comprehensive set of button components built with React and styled with Tailwind CSS.

Overview

Buttons are fundamental UI components used throughout the application. All button components are located in src/components/ui/ and follow consistent design patterns.

Button Variants

Primary Button

Used for primary actions:

<Button variant="primary" onClick={handleSubmit}>
  Create VM
</Button>

Secondary Button

Used for secondary actions:

<Button variant="secondary" onClick={handleCancel}>
  Cancel
</Button>

Danger Button

Used for destructive actions:

<Button variant="danger" onClick={handleDelete}>
  Delete VM
</Button>

Button Sizes

Buttons come in three sizes:

• Small - Compact buttons for tight spaces
• Medium - Default size for most use cases
• Large - Prominent buttons for primary CTAs

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

Loading State

Buttons can display a loading state:

<Button loading={isLoading} onClick={handleSubmit}>
  {isLoading ? 'Creating...' : 'Create VM'}
</Button>

Icon Buttons

Buttons can include icons:

<Button icon={<PlusIcon />} onClick={handleAdd}>
  Add New
</Button>

Accessibility

All buttons include proper ARIA attributes:

• aria-label for icon-only buttons
• aria-disabled for disabled state
• aria-busy for loading state
• Keyboard navigation support

Best Practices

1. Use primary buttons sparingly (one per screen section)
2. Always provide clear, action-oriented labels
3. Show loading state for async operations
4. Disable buttons to prevent duplicate submissions
5. Use danger variant only for destructive actions

Next Steps

• Form Components
• Modal Components