Components
Button
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 (overridesvariant
).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" />