Button

The Button component is a versatile and customizable component that can be used for various interactions in your React Native application. It supports different variants, sizes, loading states, and can be used for navigation with the href prop.

Features

• Multiple Variants: Choose from primary, secondary, outline, and ghost variants
• Customizable Sizes: Small, medium, and large size options
• Loading State: Built-in loading indicator
• Border Radius Customization: Various rounded styles from none to full
• Navigation Support: Can be used as a link with the href prop
• Icon Support: Add icons at the start and/or end of the button
• Accessibility: Properly handles disabled states
• Dark Mode Support: Automatically handles light/dark mode styles

Import

import { Button } from '@/components/Button';

Props

Core Props

Styling Props

Icon Props

Usage Examples

Basic Button

<Button 
  title="Press Me" 
  onPress={() => console.log('Button pressed')} 
/>

Different Variants

<Button 
  title="Primary Button" 
  variant="primary" 
/>
 
<Button 
  title="Secondary Button" 
  variant="secondary" 
/>
 
<Button 
  title="Outline Button" 
  variant="outline" 
/>
 
<Button 
  title="Ghost Button" 
  variant="ghost" 
/>

Sizes

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

Loading State

<Button 
  title="Loading Button" 
  loading={true} 
/>

With Icons

<Button 
  title="Back" 
  iconStart="arrow-left" 
/>
 
<Button 
  title="Next" 
  iconEnd="arrow-right" 
/>
 
<Button 
  title="Settings" 
  iconStart="settings" 
  iconSize={24} 
  iconColor="#FF5733" 
/>

Navigation Button

<Button 
  title="Go to Home" 
  href="/" 
/>

Custom Styling

<Button 
  title="Custom Button" 
  className="bg-purple-500 px-8" 
  textClassName="font-bold text-lg" 
  rounded="full" 
/>

Best Practices

Consistent Variant Usage

Use the same button variant for similar actions across your application:

• Use primary for main actions like "Submit", "Save", or "Continue"
• Use secondary for alternative actions like "Cancel" or "Skip"
• Use outline or ghost for less important actions or in dense UI areas

Loading States

Always provide feedback to users during asynchronous operations:

function SaveButton() {
  const [isLoading, setIsLoading] = useState(false);
  
  const handleSave = async () => {
    setIsLoading(true);
    try {
      await saveData();
    } finally {
      setIsLoading(false);
    }
  };
  
  return (
    <Button 
      title="Save" 
      onPress={handleSave} 
      loading={isLoading} 
    />
  );
}

Icon Usage

Use icons consistently to enhance clarity:

• Use recognizable icons that match your button's action
• Maintain consistent positioning (start vs end) for similar buttons
• Consider using iconStart for back/previous navigation and iconEnd for forward/next navigation

Accessibility

The Button component includes accessibility features:

• Properly handles disabled states
• Provides visual feedback with loading indicators
• Uses appropriate touch targets for different sizes

Implementation Details

Under the hood, the Button component uses React Native's TouchableOpacity for press interactions. When the href prop is provided, it uses Expo Router's navigation system.

The button's styles are defined using TailwindCSS for React Native, which automatically handles light and dark mode.

Notes

• The href prop uses Expo Router's navigation system
• When both loading and disabled props are true, the button will be disabled
• Default icon sizes are determined by the button size (small: 16, medium: 18, large: 20)
• Default icon colors match the text color based on the button variant