🖲️ Button

The Button component is a versatile and interactive UI element used to trigger actions in your app. It supports multiple variants, sizes, and icon placements to suit various design needs.

Common use cases include form submissions, navigation actions, and CTAs.

📦 Import

import Button, { ButtonSizes, ButtonVariants } from '@madefordevs1999/ui-launch-native/system/atoms/Button';

🧩 Usage

import Button, { ButtonSizes, ButtonVariants } from '@madefordevs1999/ui-launch-native/system/atoms/Button';
import { View } from 'react-native';

const App = () => {
  return (
    <View style={{ padding: 20 }}>
      <Button
        text="Continue"
        size={ButtonSizes.Large}
        variant={ButtonVariants.Secondary}
        onPress={() => console.log('Clicked!')}
      />
    </View>
  );
};

export default App;

Results

You can customize the start and end content of the button using the renderLeft and renderRight props. This allows you to add icons or other elements alongside the button text. One example of this implementation is the ButtonWithIcon component which is a wrapper around the Button component that adds an icon to the left side of the button text.

🧪 Composition

Internally, the Button is composed of:

• BaseButton: An internal stylable Pressable using Restyle.
• Typography.Button: A text component with responsive font sizing.

It supports full customization via Restyle props such as paddingHorizontal, borderRadius, or backgroundColor.

📜 Props