A selection of React Native Button with Icon components built with Tailwind CSS
These examples require the Tailwind React Native Classnames package.
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 projectsexport default function SolidButtons() {return (<View style={tailwind`flex-1 items-center justify-center gap-4`}><Pressablestyle={({ 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,]}><Iconname="information-outline"size={24}style={tailwind`text-white`}/><Text style={tailwind`text-white font-bold text-base`}>Info</Text></Pressable><Pressablestyle={({ 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><Pressablestyle={({ 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><Pressablestyle={({ 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,]}><Iconname="alert-rhombus-outline"size={24}style={tailwind`text-white`}/><Text style={tailwind`text-white font-bold text-base`}>Warning</Text></Pressable></View>);}
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 projectsexport default function BorderedButtons() {return (<View style={tailwind`flex-1 items-center justify-center gap-4`}><Pressablestyle={({ 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 }) => (<><Iconname="information-outline"size={24}style={pressed ? tailwind`text-blue-700` : tailwind`text-blue-500`}/><Textstyle={[tailwind`font-bold text-base`,pressed ? tailwind`text-blue-700` : tailwind`text-blue-500`,]}>Info</Text></>)}</Pressable><Pressablestyle={({ 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 }) => (<><Iconname="check"size={24}style={pressed? tailwind`text-emerald-700`: tailwind`text-emerald-500`}/><Textstyle={[tailwind`font-bold text-base`,pressed? tailwind`text-emerald-700`: tailwind`text-emerald-500`,]}>Success</Text></>)}</Pressable><Pressablestyle={({ 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 }) => (<><Iconname="alert-outline"size={24}style={pressed ? tailwind`text-rose-700` : tailwind`text-rose-500`}/><Textstyle={[tailwind`font-bold text-base`,pressed ? tailwind`text-rose-700` : tailwind`text-rose-500`,]}>Danger</Text></>)}</Pressable><Pressablestyle={({ 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 }) => (<><Iconname="alert-rhombus-outline"size={24}style={pressed ? tailwind`text-amber-700` : tailwind`text-amber-500`}/><Textstyle={[tailwind`font-bold text-base`,pressed ? tailwind`text-amber-700` : tailwind`text-amber-500`,]}>Warning</Text></>)}</Pressable></View>);}
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 projectsexport default function PillButtons() {return (<View style={tailwind`flex-1 items-center justify-center gap-4`}><Pressablestyle={({ 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,]}><Iconname="information-outline"size={24}style={tailwind`text-white`}/><Text style={tailwind`text-white font-bold text-base`}>Info</Text></Pressable><Pressablestyle={({ 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><Pressablestyle={({ 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><Pressablestyle={({ 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,]}><Iconname="alert-rhombus-outline"size={24}style={tailwind`text-white`}/><Text style={tailwind`text-white font-bold text-base`}>Warning</Text></Pressable></View>);}
Copyright 2022 - Atom Lab | Privacy Policy | Terms and Conditions