Button

Button provides interactive clickables with press-down spring scaling, optional haptic feedback, glassmorphism translucent styling, loading spinner states, and semantic color tones.

Usage

ButtonExample.tsx

import React from 'react';
import { Button, Box } from '@masumdev/rn-ui';
import { Sparkles, Heart } from 'lucide-react-native';

export function ButtonExample() {
  return (
    <Box gap="md">
      {/* Variants Showcase */}
      <Box row gap="sm">
        <Button variant="filled">Filled</Button>
        <Button variant="soft">Soft</Button>
        <Button variant="outline">Outline</Button>
        <Button variant="ghost">Ghost</Button>
        <Button glass leftIcon={({ color, size }) => <Sparkles color={color} size={size} />}>
          Glassmorphism
        </Button>
      </Box>

      {/* Semantic Tones */}
      <Box row gap="sm">
        <Button tone="primary" leftIcon={({ color, size }) => <Heart color={color} size={size} />}>
          Primary
        </Button>
        <Button tone="secondary">Secondary</Button>
        <Button tone="accent">Accent</Button>
        <Button tone="success">Success</Button>
        <Button tone="danger">Danger</Button>
      </Box>

      {/* Loading & Sizes */}
      <Box row gap="sm">
        <Button size="sm">Small</Button>
        <Button size="md" loading>Processing</Button>
        <Button size="lg" tone="accent">Large</Button>
      </Box>
    </Box>
  );
}

Props API

Prop	Type	Default	Description
children	ReactNode	—	Button label text or element.
variant	'filled' | 'soft' | 'outline' | 'ghost'	'filled'	Visual style variant.
tone	'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'danger' | 'info'	'primary'	Color tone styling.
size	'sm' | 'md' | 'lg'	'md'	Button height & padding scale.
glass	boolean	false	Enables translucent frosted glassmorphism background styling.
loading	boolean	false	Shows activity spinner indicator and disables touch.
disabled	boolean	false	Disables user touch interactions and dims opacity.
leftIcon	RenderIcon	—	Icon rendered before button text.
rightIcon	RenderIcon	—	Icon rendered after button text.
onPress	(event: GestureResponderEvent) => void	—	Press event callback with optional haptic trigger.