Button

This component is a generic container for other components. However, it adds some additional capabilities – support for presses or clicks and hovering.

Styles

• Flexbox Styles

• View Styles

• Transform Styles

Props

Name	Type	Description
accessibilityLabel	boolean	Text to be used by screen readers
accessibilityTraits	AccessibilityTrait| AccessibilityTrait[]	Traits used to hint screen readers, etc.
accessibilityId	string	You can assign this property, and check instance.props.accessibilityId. For example accessibilityId is used, in View's FocusArbitrator callback
activeOpacity	number	Opacity value the button should animate to on button touch iOS and Android only
ariaControls	string	Id of an expandable element revealed by the button Describes a relation between button and element to screen reader Web only
id	string	Specifies a unique id for an HTML element NOTE: This property may be going away in future versions Web only
importantForAccessibility?	ImportantForAccessibility	Expose the element and/or its children as accessible to Screen readers
delayLongPress	number	Delay in ms before onLongPress is called
disabled	boolean	If disabled, touch and mouse input events are ignored
disabledOpacity	number	By default, opacity of a disabled element is 0.5 This value can be overridden with this property
disableTouchOpacityAnimation	boolean	Disable default opacity animation on touch of buttons
autoFocus	boolean	Should be focused when the component is mounted, see also View's arbitrateFocus property WARNING: autoFocus=true means that this Button's requestFocus() method will be called, however calling requestFocus() might have no effect (for example the button is disabled), the application has to handle this either while setting this property or in the View's FocusArbitrator callback
onAccessibilityTapIOS	(e: SyntheticEvent)=> void	Called when VoiceOver is on and the user double tapped to activate a control iOS Only
onFocus	(e: FocusEvent) => void	Focus Events
onBlur	(e: FocusEvent) => void	Focus Events
onHoverStart	(e: SyntheticEvent) => void	Called when the mouse cursor enters or leaves the view boundsOnHoverEnd
onHoverEnd	(e: SyntheticEvent) => void	Called when the mouse cursor enters or leaves the view bounds
onKeyPress	(e: KeyboardEvent) => void	Keyboard Events
onLongPress	(e: SyntheticEvent) => void	Called when the user has pressed and held for a specified duration
onPress	(e: SyntheticEvent) => void	Called when the touch or mouse button is released within the bounds of the view and the press has not been canceled
onPressIn	(e: SyntheticEvent) => void	Called when touch is initiated or mouse button is pressed
onPressOut	(e: SyntheticEvent) => void	Called when touch or the mouse button is released or the user's finger or mouse cursor is no longer over the view
shouldRasterizeIOS	boolean	Rasterize contents using offscreen bitmap (perf optimization) ios only
style	ButtonStyleRuleSet | ButtonStyleRuleSet[]	See below for supported styles
tabIndex	number	Keyboard tab order
testId	string	ID that can be used to identify the instantiated element for testing purposes.
title	string	Text for a tooltip
underlayColor	string	Background color that will be visible on button touch iOS and Android only