NatUI
Guides

Common props

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

Most host components accept these optional properties:

PropTypePurpose
paddingnumber | EdgeInsetsUniform or per-edge inset
backgroundColorBackground color
cornerRadiusnumberRounded background corners
frameFrameFixed and minimum or maximum dimensions
opacitynumberVisual opacity
disabledbooleanDisables interaction
hiddenbooleanHides the native view
colorColorForeground color
helpstringNative tooltip
tagstringStable row identity for selection
badgestring | numberShort badge on supported rows or tabs
accessibilityLabelstringAssistive-technology label
accessibilityHintstringResult or purpose of activation
accessibilityIdentifierstringStable UI automation identifier

Colors are #RRGGBB or #RRGGBBAA strings.

<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

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

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

  • 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.

On this page