Button

Basic button component

Extends: TouchableOpacity
(meaning you can pass the super component's props as well).

Supported modifiers: margin, background.
Read more about modifiers here.

PROPS

namedescriptiontypedefault
labelText to show inside the buttonstring
colorThe Button text color (inherited from Text component)string
iconSourceIcon image sourceunion
iconStyleIcon image styleunion
iconOnRightShould the icon be right to the labelboolfalse
backgroundColorColor of the button backgroundstring
sizeSize of the button [large, medium, small]enum
borderRadiusCustom border radius.number
onPressActions handlerfunc
disabledDisable interactions for the componentbool
outlineButton will have outline stylebool
outlineColorThe outline colorstring
outlineWidthThe outline widthnumber
linkButton will look like a linkbool
linkColorlabel color for when it's displayed as linkstring
labelStyleAdditional styles for label textunion
labelPropsProps that will be passed to the button's Text label.object
fullWidthshould the button act as a coast to coast button (no border radius)bool
roundshould the button be a round buttonbool
enableShadowControl shadow visibilitybool
avoidInnerPaddingavoid inner button paddingbool
avoidMinWidthavoid minimum width constraintsbool
getActiveBackgroundColorcallback for getting activeBackgroundColor (e.g. (calculatedBackgroundColor, prop) => {...}) better set using ThemeManagerfunc
animateLayoutshould animate layout change Note: For Android you must set 'setLayoutAnimationEnabledExperimental(true)' via RN's 'UIManager'bool
animateTothe direction of the animation ('left' and 'right' will effect the button's own alignment)enum

LIVE EXAMPLE

CODE SAMPLE

See example here.