Button

A pressable element used to trigger actions in React Native, supporting multiple visual variants, sizes, and icon placements.

Import

tsx

import { Button } from '@tac-ui/native';

Playground

Interactively configure the Button props below.

Variant

Size

Disabled

Label

tsx

<Button variant="primary" size="md">Button</Button>

Variants

Buttons come in several refined variants to establish clear visual hierarchy in the UI.

tsx

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="point">Point</Button>
<Button variant="destructive">Destructive</Button>

Sizes

Buttons support three responsive sizes to fit various layouts.

tsx

<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

With Icons

Enhance button context with leading or trailing icons.

tsx

import { Rocket, Send } from '@tac-ui/icon-native';

<Button leftIcon={<Rocket size={16} />}>Get Started</Button>
<Button variant="outline" rightIcon={<Send size={16} />}>Submit</Button>
<Button variant="secondary" iconOnly leftIcon={<Rocket size={16} />} />

Disabled

Disabled buttons are reduced in opacity and non-interactive.

tsx

<Button disabled>Disabled Primary</Button>
<Button variant="outline" disabled>Disabled Outline</Button>

API Reference

Prop	Type	Default	Description
variant	"primary" \| "secondary" \| "outline" \| "ghost" \| "point" \| "destructive"	"primary"	Visual style variant of the button.
size	"sm" \| "md" \| "lg"	"md"	Size of the button.
leftIcon	React.ReactNode	-	Icon rendered to the left of the button label.
rightIcon	React.ReactNode	-	Icon rendered to the right of the button label.
iconOnly	boolean	false	Removes padding to properly center a single icon.
disabled	boolean	false	Disables the button when true.
style	ViewStyle	-	Additional React Native style applied to the container.
onPress	() => void	-	Callback fired when the button is pressed.
children	React.ReactNode	-	Button label content. Strings are automatically wrapped in a styled Text component.