Button

A Button component triggers actions or events. Built on top of heroui-native Button with support for variants, sizes, colors, and loading states.

Demo

React Native components render to native views, so this is the component running in the example app, in the theme you are reading in.

9:41
Button running in the Nayan UI example app

Usage

Source
Button.tsx
import { View } from 'react-native';
import { NButton, NText } from '@nayan-ui/native';


export default function ButtonScreen() {
  return (
    <View className="p-4 gap-3">
      <NText className="text-lg font-bold">Variants</NText>
      <NButton variant="primary" onPress={() => {}}>
        Primary
      </NButton>
      <NButton variant="secondary" onPress={() => {}}>
        Secondary
      </NButton>
      <NButton variant="outline" onPress={() => {}}>
        Outline
      </NButton>
      <NButton variant="danger" onPress={() => {}}>
        Danger
      </NButton>
      <NButton variant="ghost" onPress={() => {}}>
        Ghost
      </NButton>


      <NText className="text-lg font-bold">Sizes</NText>
      <NButton size="sm" onPress={() => {}}>
        Small
      </NButton>
      <NButton size="md" onPress={() => {}}>
        Medium (default)
      </NButton>
      <NButton size="lg" onPress={() => {}}>
        Large
      </NButton>


      <NText className="text-lg font-bold">Disabled</NText>
      <NButton isDisabled onPress={() => {}}>
        Disabled Primary
      </NButton>
      <NButton variant="outline" isDisabled onPress={() => {}}>
        Disabled Outline
      </NButton>


      <NText className="text-lg font-bold">Full width</NText>
      <NButton className="w-full" onPress={() => {}}>
        Full Width
      </NButton>
    </View>
  );
}

Attributes

7 props
NameTypeDefaultDetails
childrenReact.ReactNodeRequiredButton label content.
iconReact.ComponentType<any> | React.ReactElementOptionalIcon component or element to display.
variant'primary' | 'secondary' | 'outline' | 'ghost' | 'link''primary'Button variant style.
size'sm' | 'md' | 'lg''md'Button size.
isDisabledbooleanfalseWhether the button is disabled.
onPress() => voidOptionalCallback when button is pressed.
classNamestring' 'You can customise by passing tailwind classes.

Tags

Other components solving nearby problems.