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

PreviousGestureNextText

Last updated