React Native + Tailwind CSS Button with Icon

A selection of React Native Button with Icon components built with Tailwind CSS

These examples require the Tailwind React Native Classnames package.

Solid Button with Icon

import { useState } from "react";
import { Pressable, View, Text } from "react-native";
import tailwind from "twrnc";
import Icon from "@expo/vector-icons/MaterialCommunityIcons";
// import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; -> use react-native-vector-icons in vanilla RN projects

export default function SolidButtons() {
  return (
    <View style={tailwind`flex-1 items-center justify-center gap-4`}>
      <Pressable
        style={({ pressed }) => [
          tailwind`bg-blue-500 h-12 px-4 flex-row gap-2 items-center justify-center rounded-lg`,
          pressed ? tailwind`bg-blue-700` : null,
        ]}
      >
        <Icon
          name="information-outline"
          size={24}
          style={tailwind`text-white`}
        />
        <Text style={tailwind`text-white font-bold text-base`}>Info</Text>
      </Pressable>

      <Pressable
        style={({ pressed }) => [
          tailwind`bg-emerald-500 h-12 px-4 flex-row gap-2 items-center justify-center rounded-lg`,
          pressed ? tailwind`bg-emerald-700` : null,
        ]}
      >
        <Icon name="check" size={24} style={tailwind`text-white`} />
        <Text style={tailwind`text-white font-bold text-base`}>Success</Text>
      </Pressable>

      <Pressable
        style={({ pressed }) => [
          tailwind`bg-rose-500 h-12 px-4 flex-row gap-2 items-center justify-center rounded-lg`,
          pressed ? tailwind`bg-rose-700` : null,
        ]}
      >
        <Icon name="alert-outline" size={24} style={tailwind`text-white`} />
        <Text style={tailwind`text-white font-bold text-base`}>Danger</Text>
      </Pressable>

      <Pressable
        style={({ pressed }) => [
          tailwind`bg-orange-500 h-12 px-4 flex-row gap-2 items-center justify-center rounded-lg`,
          pressed ? tailwind`bg-orange-700` : null,
        ]}
      >
        <Icon
          name="alert-rhombus-outline"
          size={24}
          style={tailwind`text-white`}
        />
        <Text style={tailwind`text-white font-bold text-base`}>Warning</Text>
      </Pressable>
    </View>
  );
}

Bordered Button with Icon

import { Pressable, View, Text } from "react-native";
import tailwind from "twrnc";
import Icon from "@expo/vector-icons/MaterialCommunityIcons";
// import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; -> use react-native-vector-icons in vanilla RN projects

export default function BorderedButtons() {
  return (
    <View style={tailwind`flex-1 items-center justify-center gap-4`}>
      <Pressable
        style={({ pressed }) => [
          tailwind`border-2 border-blue-500 h-12 px-4 flex-row gap-2 items-center justify-center rounded-md`,
          pressed ? tailwind`border-blue-700` : null,
        ]}
      >
        {({ pressed }) => (
          <>
            <Icon
              name="information-outline"
              size={24}
              style={
                pressed ? tailwind`text-blue-700` : tailwind`text-blue-500`
              }
            />
            <Text
              style={[
                tailwind`font-bold text-base`,
                pressed ? tailwind`text-blue-700` : tailwind`text-blue-500`,
              ]}
            >
              Info
            </Text>
          </>
        )}
      </Pressable>

      <Pressable
        style={({ pressed }) => [
          tailwind`border-2 border-emerald-500 h-12 px-4 flex-row gap-2 items-center justify-center rounded-md`,
          pressed ? tailwind`border-emerald-700` : null,
        ]}
      >
        {({ pressed }) => (
          <>
            <Icon
              name="check"
              size={24}
              style={
                pressed
                  ? tailwind`text-emerald-700`
                  : tailwind`text-emerald-500`
              }
            />
            <Text
              style={[
                tailwind`font-bold text-base`,
                pressed
                  ? tailwind`text-emerald-700`
                  : tailwind`text-emerald-500`,
              ]}
            >
              Success
            </Text>
          </>
        )}
      </Pressable>

      <Pressable
        style={({ pressed }) => [
          tailwind`border-2 border-rose-500 h-12 px-4 flex-row gap-2 items-center justify-center rounded-md`,
          pressed ? tailwind`border-rose-700` : null,
        ]}
      >
        {({ pressed }) => (
          <>
            <Icon
              name="alert-outline"
              size={24}
              style={
                pressed ? tailwind`text-rose-700` : tailwind`text-rose-500`
              }
            />
            <Text
              style={[
                tailwind`font-bold text-base`,
                pressed ? tailwind`text-rose-700` : tailwind`text-rose-500`,
              ]}
            >
              Danger
            </Text>
          </>
        )}
      </Pressable>

      <Pressable
        style={({ pressed }) => [
          tailwind`border-2 border-amber-500 h-12 px-4 flex-row gap-2 items-center justify-center rounded-md`,
          pressed ? tailwind`border-amber-700` : null,
        ]}
      >
        {({ pressed }) => (
          <>
            <Icon
              name="alert-rhombus-outline"
              size={24}
              style={
                pressed ? tailwind`text-amber-700` : tailwind`text-amber-500`
              }
            />
            <Text
              style={[
                tailwind`font-bold text-base`,
                pressed ? tailwind`text-amber-700` : tailwind`text-amber-500`,
              ]}
            >
              Warning
            </Text>
          </>
        )}
      </Pressable>
    </View>
  );
}

Pill Button with Icon

import { useState } from "react";
import { Pressable, View, Text } from "react-native";
import tailwind from "twrnc";
import Icon from "@expo/vector-icons/MaterialCommunityIcons";
// import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; -> use react-native-vector-icons in vanilla RN projects

export default function PillButtons() {
  return (
    <View style={tailwind`flex-1 items-center justify-center gap-4`}>
      <Pressable
        style={({ pressed }) => [
          tailwind`bg-blue-500 h-12 px-6 flex-row gap-2 items-center justify-center rounded-full`,
          pressed ? tailwind`bg-blue-700` : null,
        ]}
      >
        <Icon
          name="information-outline"
          size={24}
          style={tailwind`text-white`}
        />
        <Text style={tailwind`text-white font-bold text-base`}>Info</Text>
      </Pressable>

      <Pressable
        style={({ pressed }) => [
          tailwind`bg-emerald-500 h-12 px-6 flex-row gap-2 items-center justify-center rounded-full`,
          pressed ? tailwind`bg-emerald-700` : null,
        ]}
      >
        <Icon name="check" size={24} style={tailwind`text-white`} />
        <Text style={tailwind`text-white font-bold text-base`}>Success</Text>
      </Pressable>

      <Pressable
        style={({ pressed }) => [
          tailwind`bg-rose-500 h-12 px-6 flex-row gap-2 items-center justify-center rounded-full`,
          pressed ? tailwind`bg-rose-700` : null,
        ]}
      >
        <Icon name="alert-outline" size={24} style={tailwind`text-white`} />
        <Text style={tailwind`text-white font-bold text-base`}>Danger</Text>
      </Pressable>

      <Pressable
        style={({ pressed }) => [
          tailwind`bg-orange-500 h-12 px-6 flex-row gap-2 items-center justify-center rounded-full`,
          pressed ? tailwind`bg-orange-700` : null,
        ]}
      >
        <Icon
          name="alert-rhombus-outline"
          size={24}
          style={tailwind`text-white`}
        />
        <Text style={tailwind`text-white font-bold text-base`}>Warning</Text>
      </Pressable>
    </View>
  );
}