Color Variants

React Button Pro comes with several color variants to match your application's design system.

Example

Available Colors

The following color variants are available:

• primary - Primary brand color (default)
• secondary - Secondary brand color
• neutral - Neutral/gray color
• info - Blue color for informational actions
• error - Red color for destructive actions
• warning - Orange/yellow color for cautionary actions
• success - Green color for successful actions

Usage

// Basic usage
<Button color="primary">Primary Button</Button>
 
// With other props
<Button 
  color="error"
  variant="outline"
  size="lg"
>
  Delete Account
</Button>

Best Practices

1. Color Usage:

   • Use primary for main actions
   • Use secondary for alternative actions
   • Use error for destructive actions
   • Use success for confirmatory actions
   • Use warning for cautionary actions
   • Use info for informational actions
   • Use neutral for less important actions

2. Accessibility:

   • Ensure sufficient color contrast
   • Don't rely solely on color to convey meaning
   • Consider color-blind users

3. Consistency:

   • Use consistent colors for similar actions
   • Follow your design system's color guidelines
   • Maintain visual hierarchy

4. Context:

   • Choose colors appropriate to the action
   • Consider the surrounding UI elements
   • Use color to guide user attention