Button Variants

React Button Pro offers multiple style variants to suit different UI needs and hierarchies.

Example

Available Variants

The following style variants are available:

• solid - Default solid background style (default)
• outline - Bordered style with transparent background
• flat - Solid background with lower contrast
• light - Lighter background with subtle hover effect
• ghost - Transparent background with hover effect
• text - Text-only style with hover effect

Usage

// Basic usage
<Button variant="outline">Outline Button</Button>
 
// With other props
<Button 
  variant="ghost"
  color="primary"
  size="lg"
>
  Ghost Button
</Button>

Best Practices

1. Variant Selection:

   • Use solid for primary actions
   • Use outline for secondary actions
   • Use ghost/text for tertiary actions
   • Use light for subtle actions
   • Use flat for grouped actions

2. Visual Hierarchy:

   • Maintain clear action hierarchy
   • Use consistent variants for similar actions
   • Consider the context and importance

3. Combinations:

   • Pair variants with appropriate colors
   • Consider contrast with background
   • Match variant with action type

4. Context Usage:

   • Use solid variants for main CTAs
   • Use outline/ghost for optional actions
   • Use text variant for subtle actions
   • Consider mobile touch targets