React Native + Tailwind CSS Button Group

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

These examples require the Tailwind React Native Classnames package.

Solid Button Group

Solid Button Group
import { View, Pressable, Text } from 'react-native';
import tailwind from 'twrnc';
export const SolidButtonGroup = () => {
return (
<View style={tailwind`flex flex-row`}>
<Pressable
style={tailwind`bg-slate-900 py-3 px-4 rounded-l-md border-r border-t border-b border-slate-200`}
>
<Text style={tailwind`text-white font-medium`}>One</Text>
</Pressable>
<Pressable
style={tailwind`bg-slate-100 py-3 px-4 border-t border-b border-r border-slate-200`}
>
<Text style={tailwind`text-slate-900 font-medium`}>Two</Text>
</Pressable>
<Pressable style={tailwind`bg-slate-100 py-3 px-4 border-t border-b border-slate-200`}>
<Text style={tailwind`text-slate-900 font-medium`}>Two</Text>
</Pressable>
<Pressable style={tailwind`bg-slate-100 py-3 px-4 rounded-r-md border border-slate-200`}>
<Text style={tailwind`text-slate-900 font-medium`}>Three</Text>
</Pressable>
</View>
);
};

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