​
Overview

Button is a React Native component designed for creating styled buttons. It provides quick style customization through the variant prop, automatically adapting to the device’s current color scheme. If you want to control style using Tailwind CSS classes, use the containerClasses and labelClasses props.

​
Preview

Light mode

Dark mode

​
Installation

Include the Button.tsx file in your React Native project. File Link

​
Properties

  • label: string (required) - The label displayed on the button.
  • containerClasses?: string (optional) - The classes for the parent container (overrides variant).
  • labelClasses?: string (optional) - The classes for the button’s text.
  • variant?: Variant (optional) - The variant of the button. Can be one of ‘default’, ‘secondary’, ‘ghost’, or ‘destructive’.
  • onPress?: (optional) - The handler called when the button is pressed. The signature is () => void.

Note: The variant property determines the background color of the button. The color scheme (light/dark mode) is automatically detected.

​
Usage

​
Basic usage with variant

<Button label="Button" />
<Button label="Button" variant="secondary" />
<Button label="Button" variant="destructive" />

​
Basic usage with custom classes

<Button label="Button" containerClasses="px-4 py-3 rounded-md" />
<Button label="Button" labelClasses="font-semibold text-lg" />
AvatarBadge