TcbsButton

The TcbsButton component is a highly customizable button with icon support and theme integration.

For glass-style surfaces and circular close actions, use TcbsLiquidGlassButton and TcbsLiquidGlassIconButton instead. See the Liquid Glass Buttons page for that API.

Props

Prop	Type	Default	Description
title	string	-	Button text
onPress	(event: GestureResponderEvent) => void	Required	Callback function when pressed
size	'large' | 'medium' | 'small'	'large'	Button size
variant	'primary' | 'secondary' | 'no_border'	'primary'	Button style variant
disabled	boolean	false	Disable button interaction
iconName	string	-	Icon name from icon library
iconGroup	string	'MaterialIcons'	Icon library to use
iconPosition	'top' | 'left' | 'right'	'top'	Position of the icon
accessibilityLabel	string	-	Accessibility label
style	StyleProp<ViewStyle>	-	Additional styles
textStyle	StyleProp<TextStyle>	-	Additional text styles

Examples

Basic Usage

<TcbsButton
  title="Submit"
  onPress={() => console.log('Pressed')}
/>

With Icon

<TcbsButton
  title="Check"
  iconName="check"
  iconGroup="AntDesign"
  iconPosition="left"
  onPress={() => console.log('Pressed')}
/>

Different Sizes and Variants

<TcbsButton
  title="Large"
  size="large"
  variant="primary"
  onPress={() => console.log('Pressed')}
/>

<TcbsButton
  title="Medium"
  size="medium"
  variant="secondary"
  onPress={() => console.log('Pressed')}
/>

<TcbsButton
  title="Small"
  size="small"
  variant="no_border"
  onPress={() => console.log('Pressed')}
/>

Theme Integration

The button automatically adapts to the current theme:

• Primary: Uses primary color from theme
• Secondary: Uses border and text color from theme
• No Border: Transparent background with themed text color