# Common props

> Apply shared layout, appearance, identity, and accessibility props to NatUI components.

Canonical: https://natui.dev/docs/guides/common-props

Most host components accept these optional properties:

| Prop                      | Type                   | Purpose                                 |
| ------------------------- | ---------------------- | --------------------------------------- |
| `padding`                 | `number \| EdgeInsets` | Uniform or per-edge inset               |
| `background`              | `Color`                | Background color                        |
| `cornerRadius`            | `number`               | Rounded background corners              |
| `frame`                   | `Frame`                | Fixed and minimum or maximum dimensions |
| `opacity`                 | `number`               | Visual opacity                          |
| `disabled`                | `boolean`              | Disables interaction                    |
| `hidden`                  | `boolean`              | Hides the native view                   |
| `color`                   | `Color`                | Foreground color                        |
| `help`                    | `string`               | Native tooltip                          |
| `tag`                     | `string`               | Stable row identity for selection       |
| `badge`                   | `string \| number`     | Short badge on supported rows or tabs   |
| `accessibilityLabel`      | `string`               | Assistive-technology label              |
| `accessibilityHint`       | `string`               | Result or purpose of activation         |
| `accessibilityIdentifier` | `string`               | Stable UI automation identifier         |

Colors are `#RRGGBB` or `#RRGGBBAA` strings.

```tsx
<Text
  padding={{ top: 8, bottom: 8, leading: 12, trailing: 12 }}
  background="#E94F37"
  color="#FFFFFF"
  cornerRadius={8}
  frame={{ minWidth: 120, maxWidth: 'infinity' }}
  accessibilityLabel="Build status"
>
  Ready
</Text>
```

## Frames [#frames]

`Frame` accepts `width`, `height`, `minWidth`, `maxWidth`, `minHeight`, and `maxHeight`. A maximum can be a number or `"infinity"`.

All dimensions use logical points. A frame participates in native layout and is not a CSS box.

## JSON boundary [#json-boundary]

Props that cross to the host must contain strings, finite numbers, booleans, null, arrays, or plain objects made from those values. Event-handler functions stay in JavaScript and are never serialized.

Invalid values such as `BigInt`, circular objects, class instances, nested functions, or non-finite numbers are reported with their component kind and prop path, then omitted.

## Platform details [#platform-details]

* Container foreground color does not cascade on Windows. Set `color` on leaf content.
* Windows rounds panel backgrounds but does not clip children to `cornerRadius`.
* Windows `Image` does not paint its own padding or background.
* Accessibility identifiers map to AX identifiers on macOS and Automation IDs on Windows.