Skip to main content

Button

Customizable button component that handles press events
(code example)

info

This component extends TouchableOpacity props.

tip

This component support margin, background modifiers.

Usage​

Live Editor
<Button label={'Press'} size={Button.sizes.medium} backgroundColor={Colors.red30}/>
Result
Loading...

API​

animateLayout​

should animate layout change. Note: For Android you must set 'setLayoutAnimationEnabledExperimental(true)' via RN's 'UIManager' boolean

animateTo​

the direction of the animation ('left' and 'right' will effect the button's own alignment) ButtonAnimationDirection

avoidInnerPadding​

avoid inner button padding boolean

avoidMinWidth​

avoid minimum width constraints boolean

backgroundColor​

Color of the button background string

borderRadius​

Custom border radius. number

color​

The Button text color (inherited from Text component) string

disabled​

Disable interactions for the component boolean

disabledBackgroundColor​

Color of the disabled button background string

enableShadow​

Control shadow visibility (iOS-only) boolean

fullWidth​

should the button act as a coast to coast button (no border radius) boolean

getActiveBackgroundColor​

callback for getting activeBackgroundColor (e.g. (calculatedBackgroundColor, prop) => {...}). Better set using ThemeManager (backgroundColor: string, props: any) => string

Button will look like a hyperlink boolean

iconOnRight​

Should the icon be right to the label boolean

iconProps​

Icon image props Partial<ImageProps>

iconSource​

Icon image source or a callback function that returns a source ImageProps['source'] | Function

iconStyle​

Icon image style ImageStyle

label​

Text to show inside the button string

labelProps​

Props that will be passed to the button's Text label. TextProps

labelStyle​

Additional styles for label text TextStyle

Button will look like a link boolean

linkColor​

label color for when it's displayed as link or hyperlink string

onPress​

Actions handler (props: any) => void

outline​

Button will have outline style boolean

outlineColor​

The outline color string

outlineWidth​

The outline width number

round​

should the button be a round button boolean

size​

Size of the button [large, medium, small, xSmall] ButtonSize

supportRTL​

whether the icon should flip horizontally on RTL locals boolean