Button

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

If this button doesn't look right for your app, you can build your own button using Pressable. For inspiration, look at the source code for the Button component.

<Button
  onPress={onPressLearnMore}
  title="Learn More"
  color="#841584"
  accessibilityLabel="Learn more about this purple button"
/>

Example

import React from 'react';
import {StyleSheet, Button, View, Text, Alert} from 'react-native';
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';

const Separator = () => <View style={styles.separator} />;

const App = () => (
  <SafeAreaProvider>
    <SafeAreaView style={styles.container}>
      <View>
        <Text style={styles.title}>
          The title and onPress handler are required. It is recommended to set
          accessibilityLabel to help make your app usable by everyone.
        </Text>
        <Button
          title="Press me"
          onPress={() => Alert.alert('Simple Button pressed')}
        />
      </View>
      <Separator />
      <View>
        <Text style={styles.title}>
          Adjust the color in a way that looks standard on each platform. On
          iOS, the color prop controls the color of the text. On Android, the
          color adjusts the background color of the button.
        </Text>
        <Button
          title="Press me"
          color="#f194ff"
          onPress={() => Alert.alert('Button with adjusted color pressed')}
        />
      </View>
      <Separator />
      <View>
        <Text style={styles.title}>
          All interaction for the component are disabled.
        </Text>
        <Button
          title="Press me"
          disabled
          onPress={() => Alert.alert('Cannot press this one')}
        />
      </View>
      <Separator />
      <View>
        <Text style={styles.title}>
          This layout strategy lets the title define the width of the button.
        </Text>
        <View style={styles.fixToText}>
          <Button
            title="Left button"
            onPress={() => Alert.alert('Left button pressed')}
          />
          <Button
            title="Right button"
            onPress={() => Alert.alert('Right button pressed')}
          />
        </View>
      </View>
    </SafeAreaView>
  </SafeAreaProvider>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    marginHorizontal: 16,
  },
  title: {
    textAlign: 'center',
    marginVertical: 8,
  },
  fixToText: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  separator: {
    marginVertical: 8,
    borderBottomColor: '#737373',
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
});

export default App;

Reference

Props

onPress Required

Handler to be called when the user taps the button.

title Required

Text to display inside the button. On Android the given title will be converted to the uppercased form.

accessibilityLabel

Text to display for blindness accessibility features.

accessibilityLanguage iOS

A value indicating which language should be used by the screen reader when the user interacts with the element. It should follow the BCP 47 specification.

See the iOS accessibilityLanguage doc for more information.

accessibilityActions

Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. The accessibilityActions property should contain a list of action objects. Each action object should contain the field name and label.

See the Accessibility guide for more information.

onAccessibilityAction

Invoked when the user performs the accessibility actions. The only argument to this function is an event containing the name of the action to perform.

See the Accessibility guide for more information.

color

Color of the text (iOS, Vega), or background color of the button (Android).

disabled

If true, disable all interactions for this component.

hasTVPreferredFocus TV

TV preferred focus.

nextFocusDown AndroidVegaTV

Designates the next view to receive focus when the user navigates down. See the Android documentation.

nextFocusForward AndroidVegaTV

Designates the next view to receive focus when the user navigates forward. See the Android documentation.

nextFocusLeft AndroidVegaTV

Designates the next view to receive focus when the user navigates left. See the Android documentation.

nextFocusRight AndroidVegaTV

Designates the next view to receive focus when the user navigates right. See the Android documentation.

nextFocusUp AndroidVegaTV

Designates the next view to receive focus when the user navigates up. See the Android documentation.

enableSynchronousFocusEvents

When set to true, onFocus/onBlur events will be dispatched synchronously, blocking the UI Thread until the JavaScript execution of onFocus/onBlur completes.

enableSynchronousFocusEventsKepler

Deprecated. Use enableSynchronousFocusEvents instead. When set to true, onFocus/onBlur events will be dispatched synchronously, blocking the UI Thread until the JavaScript execution of onFocus/onBlur completes.

testID

Used to locate this view in end-to-end tests.

onFocus Vega

Callback that is called when the button is focused.

onBlur Vega

Callback that is called when the button loses focus.

style Vega

Style for the Touchable.

focusable Vega

Whether this View should be focusable with a non-touch input device, eg. receive focus with a hardware keyboard.

isFocusableInTouchMode Vega

Is view focusable in Touch mode.

voiceOrdinal Vega

Add voiceOrdinal, used for ordinal selection for Voice Input.

voiceEntityType Vega

Add voiceEntityType, used to indicate the entity type of an element.

voiceExternalIds Vega

Add voiceExternalIds, used to represent the external ids of an element.

voiceAlternativeNames Vega

Add voiceAlternativeNames, used to provide the alternative names selectable by voice commands.

touchSoundDisabled Android

If true, doesn't play system sound on touch.

alexaEntityType Vega

An alias for voiceEntityType. alexaEntityType represents the value for the type of object that needs to be considered by Alexa UIController Interface. This is an optional prop and specific to Alexa UIController Interface support, it maps to the entity.type field from the Alexa UIController Interface (Alexa UIController API doc)

alexaExternalIds Vega

An alias for voiceExternalIds. This is an optional prop and specific to Alexa UIController Interface support, it maps to the entity.ExternalIds field from the Alexa UIController Interface (Alexa UIController API doc)

entity.ExternalIds are the identifiers for this entity unique within the scope of this endpoint. The entity.externalIds field will be opaque to Alexa and will only be used to include in directives from Alexa. The identifiers reported in entity.externalIds are required to be understood by the endpoint on all directive commands that accept an entity structure.

ariaPosInSet Vega

The value for ariaPosInSet refers to the number of the element when the user can refer to the element by number, such as "Alexa, select number one."

This prop is required if the app wants to allow user to perform voice selection based on the number.

Please note that providing the prop with a value does not result in the value being rendered automatically from the component, for a consistent user behavior, app needs to render the same ordinal value for the item.

aria-label Vega

aria-label is an accessibility prop (reference to React Native Doc), it can also be used specify the name of the item in voice selection, such as "Alexa, select Prime Video".

This prop is required if the app wants to allow user to perform voice selection based on the name.

Please note that providing the prop with a value does not result in the value being render as the title of the component, app needs to explicted render the same text value for the item.

ariaLabel Vega

Deprecated. Use aria-label instead.

The value for ariaLabel refers to the name of the item, such as "Alexa, select Prime Video".

This prop is required if the app wants to allow user to perform voice selection based on the name.

Please note that providing the prop with a value does not result in the value being render as the title of the component, app needs to explicted render the same text value for the item.

altLabels Vega

An alias for voiceAlternativeNames. The value for altLabels refers to the list of alternate names for the item. (Renamed from keplerAltLabels)

This prop is required if the app wants to allow user to perform voice selection on the same item with different names.

keplerAltLabels Vega

Deprecated. Use altLabels instead.

The value for keplerAltLabels refers to the list of alternate names for the item. (Renamed from keplerAtlLabels)

This prop is required if the app wants to allow user to perform voice selection on the same item with different names.

Last updated: Jun 22, 2026