# Button

### Styles

* Flexbox Styles
* View Styles
* Transform Styles

### Props

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