Skip to main content

​
Overview

Button is a React Native component designed for creating styled buttons. It provides quick style customization through the variant and size props, automatically adapting to the device’s current color scheme. Control style using Tailwind CSS classes through the className and labelClasses props.

​
Preview

  • Preview
  • Code

Light mode

Dark mode

​
Installation

  • CLI
  • Manual
npx nativecn-ui add Button

​
Properties

  • label: string (required) - The label displayed on the button.
  • labelClasses?: string (optional) - The classes for the button’s text.
  • className?: string (optional) - The classes for the parent container.
  • variant?: Variant (optional) - The variant of the button. Can be one of ‘default’, ‘secondary’, ‘ghost’, ‘destructive’, or ‘link’.
  • size?: Variant (optional) - The size of the button. Can be one of ‘default’, ‘sm’, or ‘lg’.
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 size

<Button label="Button" size="sm" />
<Button label="Button" size="lg" />

​
Basic usage with custom classes

<Button label="Button" className="px-6 py-3 rounded-lg" />
<Button label="Button" labelClasses="font-semibold text-lg" />