Developer Documentation
Search
⌃K
Comment on page

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
Components - Previous
Gesture
Next - Components
Text
Last modified 3yr ago