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 TouchableOpacity or TouchableWithoutFeedback.
<Button
onPress={onPressLearnMore}
title="Learn More"
color="#841584"
accessibilityLabel="Learn more about this purple button"
/>
Example
import React from 'react';
import {
StyleSheet,
Button,
View,
SafeAreaView,
Text,
Alert,
} from 'react-native';
const Separator = () => <View style={styles.separator} />;
const App = () => (
<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>
);
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
Required onPress
Handler to be called when the user taps the button.
Type |
---|
({nativeEvent: [PressEvent](pressevent)}) |
Required title
Text to display inside the button. On Android the given title will be converted to the uppercased form.
Type |
---|
string |
accessibilityLabel
Text to display for blindness accessibility features.
Type |
---|
string |
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.
Type | Required |
---|---|
array | No |
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.
Type | Required |
---|---|
function | No |
color
Color of the text or background color of the button.
export function ColorDefaults() {
return (
<>
<ins style={ background: "#2196F3" }} className="color-box" />{" "}<code>'#2196F3'</code>
{" "}<div className="label android">Android</div>
<hr />
<ins style={{ background: "#007AFF" }} className="color-box" />{" "}<code>'#007AFF'</code>
{" "}<div className="label ios">iOS</div>
</>
);
}
Type | Default |
---|---|
color |
disabled
If true
, disable all interactions for this component.
Type | Default |
---|---|
bool | false |
hasTVPreferredFocus
TV preferred focus.
Type | Default |
---|---|
bool | false |
nextFocusDown
Designates the next view to receive focus when the user navigates down.
Type | Required | Platform |
---|---|---|
number | No | Kepler |
nextFocusForward
TV next focus forward (see documentation for the View component).
Type | Required | Platform |
---|---|---|
number | No | Kepler |
nextFocusLeft
Designates the next view to receive focus when the user navigates forward.
Type | Required | Platform |
---|---|---|
number | No | Kepler |
nextFocusRight
Designates the next view to receive focus when the user navigates right.
Type | Required | Platform |
---|---|---|
number | No | Kepler |
nextFocusUp
Designates the next view to receive focus when the user navigates up.
Type | Required | Platform |
---|---|---|
number | No | Kepler |
enableSynchronousFocusEventsKepler
When set to true
, onFocus
and onBlur
events are dispatched synchronously. UI Thread will be blocked until the execution of onFocus
or onBlur
from JavaScript has completed.
Type | Required | Platform |
---|---|---|
bool | No | Kepler |
enableSynchronousFocusEventsKepler
When set to true
, onFocus
and onBlur
events are dispatched synchronously. UI Thread will be blocked until the execution of onFocus
or onBlur
from JavaScript has completed.
Type | Required | Platform |
---|---|---|
bool | No | Kepler |
testID
Used to locate this view in end-to-end tests.
Type |
---|
string |
alexaEntityType - Kepler Only
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)
Type |
---|
enum('Thing', 'VideoObject', 'ItemList', 'SoftwareApplication') |
alexaExternalIds - Kepler Only
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 are opaque to Alexa and are only 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.
Type |
---|
object: {key: "string", value: "string"} |
ariaPosInSet
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.
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.
Type |
---|
number |
aria-label
aria-label
is an accessibility prop. See Accessibility on the React Native documenation site. You can use it to specify the name of the item in voice selection, such as "Alexa, select Prime Video".
This prop is required if the app needs to allow the user to perform voice selection based on the name.
Note: Providing the prop with a value does not result in the value being rendered as the title of the component, the app must explictly render the same text value for the item.
Type |
---|
string |
ariaLabel
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 the user to perform voice selection based on the name.
Note: Providing the prop with a value does not result in the value being rendered as the title of the component, the app must explictly render the same text value for the item.
Type |
---|
string |
keplerAltLabels - Kepler Only
The value for keplerAltLabels
refers to the list of alternate names for the item.
Note: This property replaces keplerAtlLabels
. keplerAtlLabels
is deprecated and will be removed in a future release.
This prop is required if the app wants to allow user to perform voice selection on the same item with different names.
Type |
---|
Array of string |
Last updated: Sep 30, 2025