Button
Customizable button component that handles press events
(code example)
info
This component extends TouchableOpacity props.
tip
This component support margin, background modifiers.
#
Usage<Button label={'Press'} size={Button.sizes.medium} backgroundColor={Colors.red30}/>
#
API#
animateLayoutshould animate layout change. Note: For Android you must set 'setLayoutAnimationEnabledExperimental(true)' via RN's 'UIManager'
boolean
#
animateTothe direction of the animation ('left' and 'right' will effect the button's own alignment)
ButtonAnimationDirection
#
avoidInnerPaddingavoid inner button padding
boolean
#
avoidMinWidthavoid minimum width constraints
boolean
#
backgroundColorColor of the button background
string
#
borderRadiusCustom border radius.
number
#
colorThe Button text color (inherited from Text component)
string
#
disabledDisable interactions for the component
boolean
#
disabledBackgroundColorColor of the disabled button background
string
#
enableShadowControl shadow visibility (iOS-only)
boolean
#
fullWidthshould the button act as a coast to coast button (no border radius)
boolean
#
getActiveBackgroundColorcallback for getting activeBackgroundColor (e.g. (calculatedBackgroundColor, prop) => {...}). Better set using ThemeManager
(backgroundColor: string, props: any) => string
#
hyperlinkButton will look like a hyperlink
boolean
#
iconOnRightShould the icon be right to the label
boolean
#
iconPropsIcon image props
Partial<ImageProps>
#
iconSourceIcon image source or a callback function that returns a source
ImageProps['source'] | Function
#
iconStyleIcon image style
ImageStyle
#
labelText to show inside the button
string
#
labelPropsProps that will be passed to the button's Text label.
TextProps
#
labelStyleAdditional styles for label text
TextStyle
#
linkButton will look like a link
boolean
#
linkColorlabel color for when it's displayed as link or hyperlink
string
#
onPressActions handler
(props: any) => void
#
outlineButton will have outline style
boolean
#
outlineColorThe outline color
string
#
outlineWidthThe outline width
number
#
roundshould the button be a round button
boolean
#
sizeSize of the button [large, medium, small, xSmall]
ButtonSize
#
supportRTLwhether the icon should flip horizontally on RTL locals
boolean