Button

lunar add button

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

<Button>Click me</Button>

<Button variant="default">Default</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon">
  <Settings size={16} />
</Button>

<Button loading>Submitting...</Button>
 
// With custom loading behavior
const [isLoading, setIsLoading] = useState(false);
 
<Button 
  loading={isLoading} 
  onPress={async () => {
    setIsLoading(true);
    await submitForm();
    setIsLoading(false);
  }}
>
  Submit
</Button>
 

<Button disabled>Disabled</Button>

import { Mail, ArrowRight, Plus } from 'lucide-react-native';
 
// Left icon
<Button leftIcon={<Mail size={16} color="white" />}>
  Send Email
</Button>
 
// Right icon
<Button rightIcon={<ArrowRight size={16} color="white" />}>
  Continue
</Button>
 
// Both icons
<Button 
  leftIcon={<Plus size={16} color="white" />}
  rightIcon={<ArrowRight size={16} color="white" />}
>
  Add Item
</Button>
 
// Icon only
<Button size="icon" variant="outline">
  <Plus size={16} />
</Button>