ttolbel UI

Component

Button

A pressable action with six variants, five sizes, and a spring-backed tap response tuned to Apple's WWDC23 press-feedback curve.

The primitive

button.tsx
<NativeButton label="Continue" variant="primary" size="lg" />

Example

Inside a warning banner over an unconfirmed payment, this button is the one secondary action, retry, competing for attention against the banner's own dismiss control.

The approval lock transaction was sent but could not be confirmed. Tap below to retry.

button-example.tsx
<NativeInfoBanner
  variant="warning"
  message="The approval lock transaction was sent but could not be confirmed. Tap below to retry."
/>
<NativeButton
  label="Retry approval lock"
  variant="tinted"
  size="md"
  loading={isPending}
  onPress={retry}
/>

Capabilities

PropTypeDescription
labelrequiredstring
variantNativeButtonVariant
sizeNativeButtonSize
loadingboolean
spinnerColorstring
disabledboolean
fullWidthboolean
iconReact.ReactNode
onPress() => void
tostring
type"button" | "submit" | "reset"
classNamestring