# 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>                                                                                                                                                                                                                                                                                                               |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.ult.dev/components/button.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.