Button Component

Installation

The Button component is a versatile UI element designed for user interactions.

Installation Command

npx @nativecn/cli add button

Basic Variants

Button Variants

Default Button

Destructive Button

Outline Button

Secondary Button

Ghost Button

Link Button

Different Sizes

Button Sizes

Small

Default

Large

State Examples

Button States

Disabled Button

Disabled Outline

With Icons

Buttons with Icons

Usage Example

Basic Button Usage with Responsive Mode

import Button from '../components/ui/button';
import { useColorScheme } from 'react-native';

export function SubmitForm() {
  // Automatically use the device's color scheme
  const colorScheme = useColorScheme();
  
  return (
    <form onSubmit={handleSubmit}>
      {/* Form fields */}
      <Button 
        type="submit"
        mode={colorScheme} // 'light' or 'dark' based on system preference
      >
        Submit Form
      </Button>
    </form>
  );
}

Reference

Button Props

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
  size?: 'default' | 'sm' | 'lg' | 'icon';
  disabled?: boolean;
  className?: string;
  textClassName?: string;
  mode?: 'light' | 'dark';  // Controls light/dark appearance
  children: React.ReactNode;
  asChild?: boolean;
}

Breadcrumb Card