Buttons Components

Buttons Components cover Buttons Dark Components cover

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.

Simple Button Component

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

This button support all Tailwind CSS color variants, for the button base component and you can wrap it with `Pressable`, `TouchableOpacity` or `TouchableHighlight`.

Preview

Simple Button light component
Simple Button dark component

Code

// @/components/common/Button.tsx

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

type ColorVariant =
  | 'red'
  | 'orange'
  | 'amber'
  | 'yellow'
  | 'lime'
  | 'green'
  | 'emerald'
  | 'teal'
  | 'cyan'
  | 'sky'
  | 'blue'
  | 'indigo'
  | 'violet'
  | 'purple'
  | 'fuchsia'
  | 'pink'
  | 'rose'
  | 'slate'
  | 'gray'
  | 'zinc'
  | 'neutral'
  | 'stone';

const variantStyles: Record<ColorVariant, { bg: string; text: string; border: string }> = {
  red: { bg: 'bg-red-500 dark:bg-red-500', text: 'text-red-500', border: 'border-red-500' },
  orange: { bg: 'bg-orange-500 dark:bg-orange-500', text: 'text-orange-500', border: 'border-orange-500' },
  amber: { bg: 'bg-amber-500 dark:bg-amber-500', text: 'text-amber-500', border: 'border-amber-500' },
  yellow: { bg: 'bg-yellow-500 dark:bg-yellow-500', text: 'text-yellow-500', border: 'border-yellow-500' },
  lime: { bg: 'bg-lime-500 dark:bg-lime-500', text: 'text-lime-500', border: 'border-lime-500' },
  green: { bg: 'bg-green-500 dark:bg-green-500', text: 'text-green-500', border: 'border-green-500' },
  emerald: { bg: 'bg-emerald-500 dark:bg-emerald-500', text: 'text-emerald-500', border: 'border-emerald-500' },
  teal: { bg: 'bg-teal-500 dark:bg-teal-500', text: 'text-teal-500', border: 'border-teal-500' },
  cyan: { bg: 'bg-cyan-500 dark:bg-cyan-500', text: 'text-cyan-500', border: 'border-cyan-500' },
  sky: { bg: 'bg-sky-500 dark:bg-sky-500', text: 'text-sky-500', border: 'border-sky-500' },
  blue: { bg: 'bg-blue-500 dark:bg-blue-500', text: 'text-blue-500', border: 'border-blue-500' },
  indigo: { bg: 'bg-indigo-500 dark:bg-indigo-500', text: 'text-indigo-500', border: 'border-indigo-500' },
  violet: { bg: 'bg-violet-500 dark:bg-violet-500', text: 'text-violet-500', border: 'border-violet-500' },
  purple: { bg: 'bg-purple-500 dark:bg-purple-500', text: 'text-purple-500', border: 'border-purple-500' },
  fuchsia: { bg: 'bg-fuchsia-500 dark:bg-fuchsia-500', text: 'text-fuchsia-500', border: 'border-fuchsia-500' },
  pink: { bg: 'bg-pink-500 dark:bg-pink-500', text: 'text-pink-500', border: 'border-pink-500' },
  rose: { bg: 'bg-rose-500 dark:bg-rose-500', text: 'text-rose-500', border: 'border-rose-500' },
  slate: { bg: 'bg-slate-500 dark:bg-slate-500', text: 'text-slate-500', border: 'border-slate-500' },
  gray: { bg: 'bg-gray-500 dark:bg-gray-500', text: 'text-gray-500', border: 'border-gray-500' },
  zinc: { bg: 'bg-zinc-500 dark:bg-zinc-500', text: 'text-zinc-500', border: 'border-zinc-500' },
  neutral: { bg: 'bg-neutral-500 dark:bg-neutral-500', text: 'text-neutral-500', border: 'border-neutral-500' },
  stone: { bg: 'bg-stone-500 dark:bg-stone-500', text: 'text-stone-500', border: 'border-stone-500' },
};

export type ButtonProps = {
  children: React.ReactNode;
  onPress?: () => void;
  variant?: ColorVariant;
  outline?: boolean;
  beforeIcon?: React.ReactNode;
  afterIcon?: React.ReactNode;
};

const Button = ({
  children,
  onPress,
  variant = 'sky',
  outline = false,
  beforeIcon,
  afterIcon,
}: ButtonProps): React.JSX.Element => (
  <Pressable onPress={onPress}>
    {({ pressed }: { pressed: boolean }) => (
      <View
        className={clsx(
          'items-center justify-center flex-row gap-x-4 p-4 rounded-xl',
          outline
            ? `border-2 ${variantStyles[variant].border} bg-white dark:bg-slate-800`
            : variantStyles[variant].bg
        )}
        style={{ opacity: pressed ? 0.5 : 1 }}
      >
        {beforeIcon}
        <Text
          className={clsx(
            'text-base font-medium uppercase',
            outline ? variantStyles[variant].text : 'text-white'
          )}
        >
          {children}
        </Text>
        {afterIcon}
      </View>
    )}
  </Pressable>
);

export default Button;

Usage

import React from 'react';
import { View, Text } from 'react-native';
import { IconArrowRight, IconBrandGithub } from '@tabler/icons-react-native';
import Button from '@/components/common/Button';

export default function Screen(): React.JSX.Element {
  return (
    <View className="flex-1 p-4 gap-y-4">
      <View>
        <Text className="text-lg font-semibold mb-2 text-slate-900 dark:text-white">Default Buttons</Text>
        <View className="gap-y-2">
          <Button onPress={() => {}}>Default Button</Button>
          <Button variant="indigo" onPress={() => {}}>Success Button</Button>
          <Button variant="red" onPress={() => {}}>Danger Button</Button>
        </View>
      </View>
    </View>
  );
}

Button with Icon Component

React Native Button with icon component commonly used within forms. Customize the icons with the right intentions such as sending or uploading action. This button support all Tailwind CSS color variants.

Preview

Button with Icon light component
Button with Icon dark component

Code

// @/components/common/Button.tsx

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

type ColorVariant =
  | 'red'
  | 'orange'
  | 'amber'
  | 'yellow'
  | 'lime'
  | 'green'
  | 'emerald'
  | 'teal'
  | 'cyan'
  | 'sky'
  | 'blue'
  | 'indigo'
  | 'violet'
  | 'purple'
  | 'fuchsia'
  | 'pink'
  | 'rose'
  | 'slate'
  | 'gray'
  | 'zinc'
  | 'neutral'
  | 'stone';

const variantStyles: Record<ColorVariant, { bg: string; text: string; border: string }> = {
  red: { bg: 'bg-red-500 dark:bg-red-500', text: 'text-red-500', border: 'border-red-500' },
  orange: { bg: 'bg-orange-500 dark:bg-orange-500', text: 'text-orange-500', border: 'border-orange-500' },
  amber: { bg: 'bg-amber-500 dark:bg-amber-500', text: 'text-amber-500', border: 'border-amber-500' },
  yellow: { bg: 'bg-yellow-500 dark:bg-yellow-500', text: 'text-yellow-500', border: 'border-yellow-500' },
  lime: { bg: 'bg-lime-500 dark:bg-lime-500', text: 'text-lime-500', border: 'border-lime-500' },
  green: { bg: 'bg-green-500 dark:bg-green-500', text: 'text-green-500', border: 'border-green-500' },
  emerald: { bg: 'bg-emerald-500 dark:bg-emerald-500', text: 'text-emerald-500', border: 'border-emerald-500' },
  teal: { bg: 'bg-teal-500 dark:bg-teal-500', text: 'text-teal-500', border: 'border-teal-500' },
  cyan: { bg: 'bg-cyan-500 dark:bg-cyan-500', text: 'text-cyan-500', border: 'border-cyan-500' },
  sky: { bg: 'bg-sky-500 dark:bg-sky-500', text: 'text-sky-500', border: 'border-sky-500' },
  blue: { bg: 'bg-blue-500 dark:bg-blue-500', text: 'text-blue-500', border: 'border-blue-500' },
  indigo: { bg: 'bg-indigo-500 dark:bg-indigo-500', text: 'text-indigo-500', border: 'border-indigo-500' },
  violet: { bg: 'bg-violet-500 dark:bg-violet-500', text: 'text-violet-500', border: 'border-violet-500' },
  purple: { bg: 'bg-purple-500 dark:bg-purple-500', text: 'text-purple-500', border: 'border-purple-500' },
  fuchsia: { bg: 'bg-fuchsia-500 dark:bg-fuchsia-500', text: 'text-fuchsia-500', border: 'border-fuchsia-500' },
  pink: { bg: 'bg-pink-500 dark:bg-pink-500', text: 'text-pink-500', border: 'border-pink-500' },
  rose: { bg: 'bg-rose-500 dark:bg-rose-500', text: 'text-rose-500', border: 'border-rose-500' },
  slate: { bg: 'bg-slate-500 dark:bg-slate-500', text: 'text-slate-500', border: 'border-slate-500' },
  gray: { bg: 'bg-gray-500 dark:bg-gray-500', text: 'text-gray-500', border: 'border-gray-500' },
  zinc: { bg: 'bg-zinc-500 dark:bg-zinc-500', text: 'text-zinc-500', border: 'border-zinc-500' },
  neutral: { bg: 'bg-neutral-500 dark:bg-neutral-500', text: 'text-neutral-500', border: 'border-neutral-500' },
  stone: { bg: 'bg-stone-500 dark:bg-stone-500', text: 'text-stone-500', border: 'border-stone-500' },
};

export type ButtonProps = {
  children: React.ReactNode;
  onPress?: () => void;
  variant?: ColorVariant;
  outline?: boolean;
  beforeIcon?: React.ReactNode;
  afterIcon?: React.ReactNode;
};

const Button = ({
  children,
  onPress,
  variant = 'sky',
  outline = false,
  beforeIcon,
  afterIcon,
}: ButtonProps): React.JSX.Element => (
  <Pressable onPress={onPress}>
    {({ pressed }: { pressed: boolean }) => (
      <View
        className={clsx(
          'items-center justify-center flex-row gap-x-4 p-4 rounded-xl',
          outline
            ? `border-2 ${variantStyles[variant].border} bg-white dark:bg-slate-800`
            : variantStyles[variant].bg
        )}
        style={{ opacity: pressed ? 0.5 : 1 }}
      >
        {beforeIcon}
        <Text
          className={clsx(
            'text-base font-medium uppercase',
            outline ? variantStyles[variant].text : 'text-white'
          )}
        >
          {children}
        </Text>
        {afterIcon}
      </View>
    )}
  </Pressable>
);

export default Button;

Usage

import React from 'react';
import { View, Text } from 'react-native';
import { IconArrowRight, IconBrandGithub } from '@tabler/icons-react-native';
import Button from '@/components/common/Button';

export default function Screen(): React.JSX.Element {
  return (
    <View className="flex-1 p-4 gap-y-4">
      <View>
        <Text className="text-lg font-semibold mb-2 text-slate-900 dark:text-white">Buttons with Icons</Text>
        <View className="gap-y-2">
          <Button 
            beforeIcon={<IconBrandGithub size={24} color="white" />}
            onPress={() => {}}
          >
            With Before Icon
          </Button>
          <Button 
            afterIcon={<IconArrowRight size={24} color="white" />}
            variant="indigo"
            onPress={() => {}}
          >
            With After Icon
          </Button>
          <Button 
            beforeIcon={<IconBrandGithub size={24} color="#0EA5E9" />}
            outline
            onPress={() => {}}
          >
            Outline with Icon
          </Button>
        </View>
      </View>
    </View>
  );
}

Button link with light theme to navigate between screens

Preview

Button Link light component
Button Link dark component

Code

// @/components/common/Button.tsx

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

type ColorVariant =
  | 'red'
  | 'orange'
  | 'amber'
  | 'yellow'
  | 'lime'
  | 'green'
  | 'emerald'
  | 'teal'
  | 'cyan'
  | 'sky'
  | 'blue'
  | 'indigo'
  | 'violet'
  | 'purple'
  | 'fuchsia'
  | 'pink'
  | 'rose'
  | 'slate'
  | 'gray'
  | 'zinc'
  | 'neutral'
  | 'stone';

const variantStyles: Record<ColorVariant, { bg: string; text: string; border: string }> = {
  red: { bg: 'bg-red-500 dark:bg-red-500', text: 'text-red-500', border: 'border-red-500' },
  orange: { bg: 'bg-orange-500 dark:bg-orange-500', text: 'text-orange-500', border: 'border-orange-500' },
  amber: { bg: 'bg-amber-500 dark:bg-amber-500', text: 'text-amber-500', border: 'border-amber-500' },
  yellow: { bg: 'bg-yellow-500 dark:bg-yellow-500', text: 'text-yellow-500', border: 'border-yellow-500' },
  lime: { bg: 'bg-lime-500 dark:bg-lime-500', text: 'text-lime-500', border: 'border-lime-500' },
  green: { bg: 'bg-green-500 dark:bg-green-500', text: 'text-green-500', border: 'border-green-500' },
  emerald: { bg: 'bg-emerald-500 dark:bg-emerald-500', text: 'text-emerald-500', border: 'border-emerald-500' },
  teal: { bg: 'bg-teal-500 dark:bg-teal-500', text: 'text-teal-500', border: 'border-teal-500' },
  cyan: { bg: 'bg-cyan-500 dark:bg-cyan-500', text: 'text-cyan-500', border: 'border-cyan-500' },
  sky: { bg: 'bg-sky-500 dark:bg-sky-500', text: 'text-sky-500', border: 'border-sky-500' },
  blue: { bg: 'bg-blue-500 dark:bg-blue-500', text: 'text-blue-500', border: 'border-blue-500' },
  indigo: { bg: 'bg-indigo-500 dark:bg-indigo-500', text: 'text-indigo-500', border: 'border-indigo-500' },
  violet: { bg: 'bg-violet-500 dark:bg-violet-500', text: 'text-violet-500', border: 'border-violet-500' },
  purple: { bg: 'bg-purple-500 dark:bg-purple-500', text: 'text-purple-500', border: 'border-purple-500' },
  fuchsia: { bg: 'bg-fuchsia-500 dark:bg-fuchsia-500', text: 'text-fuchsia-500', border: 'border-fuchsia-500' },
  pink: { bg: 'bg-pink-500 dark:bg-pink-500', text: 'text-pink-500', border: 'border-pink-500' },
  rose: { bg: 'bg-rose-500 dark:bg-rose-500', text: 'text-rose-500', border: 'border-rose-500' },
  slate: { bg: 'bg-slate-500 dark:bg-slate-500', text: 'text-slate-500', border: 'border-slate-500' },
  gray: { bg: 'bg-gray-500 dark:bg-gray-500', text: 'text-gray-500', border: 'border-gray-500' },
  zinc: { bg: 'bg-zinc-500 dark:bg-zinc-500', text: 'text-zinc-500', border: 'border-zinc-500' },
  neutral: { bg: 'bg-neutral-500 dark:bg-neutral-500', text: 'text-neutral-500', border: 'border-neutral-500' },
  stone: { bg: 'bg-stone-500 dark:bg-stone-500', text: 'text-stone-500', border: 'border-stone-500' },
};

export type ButtonProps = {
  children: React.ReactNode;
  onPress?: () => void;
  variant?: ColorVariant;
  outline?: boolean;
  beforeIcon?: React.ReactNode;
  afterIcon?: React.ReactNode;
};

const Button = ({
  children,
  onPress,
  variant = 'sky',
  outline = false,
  beforeIcon,
  afterIcon,
}: ButtonProps): React.JSX.Element => (
  <Pressable onPress={onPress}>
    {({ pressed }: { pressed: boolean }) => (
      <View
        className={clsx(
          'items-center justify-center flex-row gap-x-4 p-4 rounded-xl',
          outline
            ? `border-2 ${variantStyles[variant].border} bg-white dark:bg-slate-800`
            : variantStyles[variant].bg
        )}
        style={{ opacity: pressed ? 0.5 : 1 }}
      >
        {beforeIcon}
        <Text
          className={clsx(
            'text-base font-medium uppercase',
            outline ? variantStyles[variant].text : 'text-white'
          )}
        >
          {children}
        </Text>
        {afterIcon}
      </View>
    )}
  </Pressable>
);

export default Button;

Usage

import React from 'react';
import { View, Text } from 'react-native';
import Button from '@/components/common/Button';
import { useRouter } from 'expo-router';

export default function Screen(): React.JSX.Element {
  const router = useRouter();

  return (
    <View className="flex-1 p-4 gap-y-4">
      <View>
        <Text className="text-lg font-semibold mb-2 text-slate-900 dark:text-white">Link Buttons</Text>
        <View className="gap-y-2">
          <Button variant="pink" onPress={() => { router.push('/foo') }}>Go Foo</Button>
          <Button variant="yellow" onPress={() => { router.push('/bar') }}>Go Bar</Button>
          <Button variant="orange" onPress={() => { router.push('/baz') }}>Go Baz</Button>
        </View>
      </View>
    </View>
  );
}

Outline Button Component

Simple outline button component with support for all TailwindCSS color variants.

Preview

Outline Button light component
Outline Button dark component

Code

// @/components/common/Button.tsx

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

type ColorVariant =
  | 'red'
  | 'orange'
  | 'amber'
  | 'yellow'
  | 'lime'
  | 'green'
  | 'emerald'
  | 'teal'
  | 'cyan'
  | 'sky'
  | 'blue'
  | 'indigo'
  | 'violet'
  | 'purple'
  | 'fuchsia'
  | 'pink'
  | 'rose'
  | 'slate'
  | 'gray'
  | 'zinc'
  | 'neutral'
  | 'stone';

const variantStyles: Record<ColorVariant, { bg: string; text: string; border: string }> = {
  red: { bg: 'bg-red-500 dark:bg-red-500', text: 'text-red-500', border: 'border-red-500' },
  orange: { bg: 'bg-orange-500 dark:bg-orange-500', text: 'text-orange-500', border: 'border-orange-500' },
  amber: { bg: 'bg-amber-500 dark:bg-amber-500', text: 'text-amber-500', border: 'border-amber-500' },
  yellow: { bg: 'bg-yellow-500 dark:bg-yellow-500', text: 'text-yellow-500', border: 'border-yellow-500' },
  lime: { bg: 'bg-lime-500 dark:bg-lime-500', text: 'text-lime-500', border: 'border-lime-500' },
  green: { bg: 'bg-green-500 dark:bg-green-500', text: 'text-green-500', border: 'border-green-500' },
  emerald: { bg: 'bg-emerald-500 dark:bg-emerald-500', text: 'text-emerald-500', border: 'border-emerald-500' },
  teal: { bg: 'bg-teal-500 dark:bg-teal-500', text: 'text-teal-500', border: 'border-teal-500' },
  cyan: { bg: 'bg-cyan-500 dark:bg-cyan-500', text: 'text-cyan-500', border: 'border-cyan-500' },
  sky: { bg: 'bg-sky-500 dark:bg-sky-500', text: 'text-sky-500', border: 'border-sky-500' },
  blue: { bg: 'bg-blue-500 dark:bg-blue-500', text: 'text-blue-500', border: 'border-blue-500' },
  indigo: { bg: 'bg-indigo-500 dark:bg-indigo-500', text: 'text-indigo-500', border: 'border-indigo-500' },
  violet: { bg: 'bg-violet-500 dark:bg-violet-500', text: 'text-violet-500', border: 'border-violet-500' },
  purple: { bg: 'bg-purple-500 dark:bg-purple-500', text: 'text-purple-500', border: 'border-purple-500' },
  fuchsia: { bg: 'bg-fuchsia-500 dark:bg-fuchsia-500', text: 'text-fuchsia-500', border: 'border-fuchsia-500' },
  pink: { bg: 'bg-pink-500 dark:bg-pink-500', text: 'text-pink-500', border: 'border-pink-500' },
  rose: { bg: 'bg-rose-500 dark:bg-rose-500', text: 'text-rose-500', border: 'border-rose-500' },
  slate: { bg: 'bg-slate-500 dark:bg-slate-500', text: 'text-slate-500', border: 'border-slate-500' },
  gray: { bg: 'bg-gray-500 dark:bg-gray-500', text: 'text-gray-500', border: 'border-gray-500' },
  zinc: { bg: 'bg-zinc-500 dark:bg-zinc-500', text: 'text-zinc-500', border: 'border-zinc-500' },
  neutral: { bg: 'bg-neutral-500 dark:bg-neutral-500', text: 'text-neutral-500', border: 'border-neutral-500' },
  stone: { bg: 'bg-stone-500 dark:bg-stone-500', text: 'text-stone-500', border: 'border-stone-500' },
};

export type ButtonProps = {
  children: React.ReactNode;
  onPress?: () => void;
  variant?: ColorVariant;
  outline?: boolean;
  beforeIcon?: React.ReactNode;
  afterIcon?: React.ReactNode;
};

const Button = ({
  children,
  onPress,
  variant = 'sky',
  outline = false,
  beforeIcon,
  afterIcon,
}: ButtonProps): React.JSX.Element => (
  <Pressable onPress={onPress}>
    {({ pressed }: { pressed: boolean }) => (
      <View
        className={clsx(
          'items-center justify-center flex-row gap-x-4 p-4 rounded-xl',
          outline
            ? `border-2 ${variantStyles[variant].border} bg-white dark:bg-slate-800`
            : variantStyles[variant].bg
        )}
        style={{ opacity: pressed ? 0.5 : 1 }}
      >
        {beforeIcon}
        <Text
          className={clsx(
            'text-base font-medium uppercase',
            outline ? variantStyles[variant].text : 'text-white'
          )}
        >
          {children}
        </Text>
        {afterIcon}
      </View>
    )}
  </Pressable>
);

export default Button;

Usage

import React from 'react';
import { View, Text } from 'react-native';
import { IconArrowRight, IconBrandGithub } from '@tabler/icons-react-native';
import Button from '@/components/common/Button';

export default function Screen(): React.JSX.Element {
  return (
    <View className="flex-1 p-4 gap-y-4">
      <View>
        <Text className="text-lg font-semibold mb-2 text-slate-900 dark:text-white">Outline Buttons</Text>
        <View className="gap-y-2">
          <Button outline onPress={() => {}}>Default Outline</Button>
          <Button outline variant="indigo" onPress={() => {}}>Success Outline</Button>
          <Button outline variant="red" onPress={() => {}}>Danger Outline</Button>
        </View>
      </View>
    </View>
  );
}

Gradient Button Component

Gradient button component with support for all TailwindCSS color variants

Preview

Gradient Button light component
Gradient Button dark component

Code

Unlock the code

Upgrade to Hestia Kit Pro to unlock the code.

Hestia Kit Premium

You have to be signed in to favorite this

Share

Hestia Kit Premium

This is Hestia Kit premium component