React Native + Tailwind CSS Button

A selection of React Native Button components built with Tailwind CSS

These examples require the Tailwind React Native Classnames package.

Solid Buttons

Solid Buttons
import { Pressable, View, Text } from 'react-native';
import tailwind from 'twrnc';
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 items-center justify-center rounded-lg`,
pressed ? tailwind`bg-blue-700` : null,
]}
>
<Text style={tailwind`text-white font-bold text-base`}>Info</Text>
</Pressable>
<Pressable
style={({ pressed }) => [
tailwind`bg-emerald-500 h-12 px-4 items-center justify-center rounded-lg`,
pressed ? tailwind`bg-emerald-700` : null,
]}
>
<Text style={tailwind`text-white font-bold text-base`}>Success</Text>
</Pressable>
<Pressable
style={({ pressed }) => [
tailwind`bg-rose-500 h-12 px-4 items-center justify-center rounded-lg`,
pressed ? tailwind`bg-rose-700` : null,
]}
>
<Text style={tailwind`text-white font-bold text-base`}>Danger</Text>
</Pressable>
<Pressable
style={({ pressed }) => [
tailwind`bg-orange-500 h-12 px-4 items-center justify-center rounded-lg`,
pressed ? tailwind`bg-orange-700` : null,
]}
>
<Text style={tailwind`text-white font-bold text-base`}>Warning</Text>
</Pressable>
</View>
);
}

Bordered Buttons

Bordered Buttons
import { Pressable, View, Text } from 'react-native';
import tailwind from 'twrnc';
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 items-center justify-center rounded-md`,
pressed ? tailwind`border-blue-700` : null,
]}
>
{({ pressed }) => (
<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 items-center justify-center rounded-md`,
pressed ? tailwind`border-emerald-700` : null,
]}
>
{({ pressed }) => (
<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 items-center justify-center rounded-md`,
pressed ? tailwind`border-rose-700` : null,
]}
>
{({ pressed }) => (
<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 items-center justify-center rounded-md`,
pressed ? tailwind`border-amber-700` : null,
]}
>
{({ pressed }) => (
<Text
style={[
tailwind`font-bold text-base`,
pressed ? tailwind`text-amber-700` : tailwind`text-amber-500`,
]}
>
Warning
</Text>
)}
</Pressable>
</View>
);
}

Pill Buttons

Pill Buttons
import { Pressable, View, Text } from 'react-native';
import tailwind from 'twrnc';
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 items-center justify-center rounded-full`,
pressed ? tailwind`bg-blue-700` : null,
]}
>
<Text style={tailwind`text-white font-bold text-base`}>Info</Text>
</Pressable>
<Pressable
style={({ pressed }) => [
tailwind`bg-emerald-500 h-12 px-6 items-center justify-center rounded-full`,
pressed ? tailwind`bg-emerald-700` : null,
]}
>
<Text style={tailwind`text-white font-bold text-base`}>Success</Text>
</Pressable>
<Pressable
style={({ pressed }) => [
tailwind`bg-rose-500 h-12 px-6 items-center justify-center rounded-full`,
pressed ? tailwind`bg-rose-700` : null,
]}
>
<Text style={tailwind`text-white font-bold text-base`}>Danger</Text>
</Pressable>
<Pressable
style={({ pressed }) => [
tailwind`bg-orange-500 h-12 px-6 items-center justify-center rounded-full`,
pressed ? tailwind`bg-orange-700` : null,
]}
>
<Text style={tailwind`text-white font-bold text-base`}>Warning</Text>
</Pressable>
</View>
);
}

Copyright 2022 - Atom Lab | Privacy Policy | Terms and Conditions