> ## Documentation Index
> Fetch the complete documentation index at: https://docs.napps.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Button

`button` is a native button with built-in presentation for common actions.

## Properties

| Property   | Accepted value             | Description                                    |
| ---------- | -------------------------- | ---------------------------------------------- |
| `text`     | `string`                   | Button label.                                  |
| `icon`     | `string`                   | Leading icon image URL.                        |
| `variant`  | `"primary" \| "secondary"` | Native button appearance.                      |
| `disabled` | `boolean`                  | Prevents presses and shows the disabled state. |
| `loading`  | `boolean`                  | Shows the native loading state.                |
| `onClick`  | `() => void`               | Called when the button is pressed.             |
| `style`    | `StyleProperties`          | Layout and supported appearance overrides.     |
| `key`      | `string \| number`         | React key for dynamic buttons.                 |
| `class`    | `string`                   | Registered style name for this node only.      |

## Example

```tsx theme={null}
<button
  text={isLoading ? "Saving…" : "Save changes"}
  icon="https://cdn.example.com/icons/check.png"
  variant="primary"
  disabled={!canSave}
  loading={isLoading}
  onClick={saveChanges}
/>
```

Use `button` for standard actions. Use `touchable` when the entire visual design is custom.
`button` is a leaf node and does not render `children`. Use `text` for its native label.