Button

Button is the React Native implementation shipped by the native-button registry item. The component adapts the registry's web-facing composition to native primitives and touch-based interaction.

The native Button brings the shadcn button API to React Native using Pressable. It reuses the project's button variants and automatically wraps string children in the native Typography component.

The component is intended for actions, navigation triggers, confirmations, and other touch interactions where a consistent visual treatment is required.

See the shadcn/ui Button documentation for the web component API, concepts, and additional examples.

InstallationCopy Anchor Link

CLICopy Anchor Link

npx shadcn add https://ui.tiesen.id.vn/r/native-button.json

ManualCopy Anchor Link

Copy and paste the following code into your project.

import type { VariantProps } from 'class-variance-authority'import { cva } from 'class-variance-authority'import { Pressable } from 'react-native'import { buttonVariants } from '@/components/ui/button'import { cn } from '@/lib/utils'import { Typography, TypographyContext } from '@/components/native/typography'const buttonTextVariants = cva('text-sm font-medium', {  variants: {    variant: {      default: 'text-primary-foreground',      outline: 'text-foreground',      secondary: 'text-secondary-foreground',      ghost: 'text-foreground',      success: 'text-success',      destructive: 'text-destructive',      info: 'text-info',      warning: 'text-warning',      link: 'text-primary underline-offset-4 group-active/button:underline',    },  },  defaultVariants: {    variant: 'default',  },})function Button({  className,  variant = 'default',  size = 'default',  children,  ...props}: React.ComponentProps<typeof Pressable> &  VariantProps<typeof buttonVariants>) {  return (    <TypographyContext value={cn(buttonTextVariants({ variant }))}>      <Pressable        data-slot='button'        className={cn(          buttonVariants({ variant, size, className }),          'flex-row active:opacity-80'        )}        {...props}      >        {typeof children === 'string' ? (          <Typography>{children}</Typography>        ) : (          children        )}      </Pressable>    </TypographyContext>  )}export { buttonVariants } from '@/components/ui/button'export { Button }

FeaturesCopy Anchor Link

• Built on React Native Pressable.
• Supports the shared button variants from the web component.
• Supports the shared button sizes.
• String children automatically receive native typography styling.
• Accepts all standard Pressable props such as onPress, disabled, and accessibility props.

Registry dependencies: This component depends on the web button registry component and native-typography.

UsageCopy Anchor Link

import { Button } from '@/components/native/button'

export function ButtonExample() {
  return (
    <Button variant='outline' size='default'>
      Continue
    </Button>
  )
}

VariantsCopy Anchor Link

<Button>Default</Button>
<Button variant='secondary'>Secondary</Button>
<Button variant='outline'>Outline</Button>
<Button variant='ghost'>Ghost</Button>
<Button variant='destructive'>Destructive</Button>
<Button variant='success'>Success</Button>
<Button variant='info'>Info</Button>
<Button variant='warning'>Warning</Button>
<Button variant='link'>Link</Button>

SizesCopy Anchor Link

The exact available sizes are inherited from the project's buttonVariants implementation.

<Button size='sm'>Small</Button>
<Button size='default'>Default</Button>
<Button size='lg'>Large</Button>

Icon-specific sizes are also available when provided by the shared button variant definition.

Disabled and press behaviorCopy Anchor Link

Because the native component uses Pressable, standard press lifecycle props are available:

<Button
  disabled={loading}
  onPress={handleSubmit}
>
  Save
</Button>

The native styles also apply an active opacity effect while the button is pressed.

API ReferenceCopy Anchor Link

ButtonCopy Anchor Link

variant and size are derived from the shared buttonVariants definition.