All Components Buttons

Buttons Components

React Native Button components. Use this react native button component inside a form, login screen, payment options screen, CTA, etc with support for different colors, sizes, shadows, and styles.

The button component is highly ubiquitous in user interfaces and app screens, serving not only to initiate actions but also to direct users to different screens.

This button offers diverse styles and sizes, encompassing outlined designs, multiple color options, various sizes, buttons integrated with icons, and more.

Button

Simple Button

View

Simple button components for common screen and action include CTA, forms, screen buttons, etc

There are 2 variants for the button base component and you can wrap it with `Pressable`, `TouchableOpacity` or `TouchableHighlight`.

Preview

Code

import React from 'react';
import { Pressable, Text, View } from 'react-native';

export type ButtonProps = {
  children: React.ReactNode;
  onPress?: () => void;
};

const Button = ({ children, onPress }: ButtonProps): React.JSX.Element => (
  <Pressable onPress={onPress}>
    {({ pressed }: { pressed: boolean }) => (
      <View
        className={
          'items-center justify-center gap-x-4 p-4 rounded-xl bg-sky-500 dark:bg-teal-500'
        }
        style={{ opacity: pressed ? 0.5 : 1 }}
      >
        <Text className={'text-white text-base font-medium uppercase'}>
          {children}
        </Text>
      </View>
    )}
  </Pressable>
);

import React from 'react';
import { Pressable, Text, View } from 'react-native';

export type ButtonProps = {
  children: React.ReactNode;
  onPress?: () => void;
};

const Button = ({ children, onPress }: ButtonProps): React.JSX.Element => (
  <Pressable onPress={onPress}>
    {({ pressed }: { pressed: boolean }) => (
      <View
        className={
          'items-center justify-center gap-x-4 p-4 rounded-xl bg-sky-500 dark:bg-teal-500'
        }
        style={{ opacity: pressed ? 0.5 : 1 }}
      >
        <Text className={'text-white text-base font-medium uppercase'}>
          {children}
        </Text>
      </View>
    )}
  </Pressable>
);

Usage

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

export default function Screen() {
  return (
    <Button onPress={() => {}}>Button</Button>
  )
}

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

export default function Screen() {
  return (
    <Button onPress={() => {}}>Button</Button>
  )
}

Button with Icon

View

React Native Button with icon component commonly used within forms. Customize the icons with the right intentions such as sending or uploading action.