A component that should be used to indicate the primary action to be taken on a particular page. Used when the primary action is one that entails negative actions (such as removing an entity from your application). There should be only one WarningButton per view.

Props

Name	Required	Nullable	Type
children			React.Node
activeColor			string
constrainSize			boolean
defaultColor			string
disabled			boolean
disabledColor			string
disabledStyle			{}
hoverColor			string
onPress			() ⇒ void \| Promise<void>
onPressIn			() ⇒ void \| Promise<void>
onPressOut			() ⇒ void \| Promise<void>
size			"small" \| "medium" \| "large"
style			{ [key: string]: any }
textColor			string
textStyle			{}

Examples

Sizes

Small Button

Medium Button

Large Button

() => (
  <FlexRow alignItems="flex-end">
    <WarningButton size="small" style={{ marginRight: 10 }}>
      Small Button
    </WarningButton>
    <WarningButton size="medium" style={{ marginRight: 10 }}>
      Medium Button
    </WarningButton>
    <WarningButton size="large">Large Button</WarningButton>
  </FlexRow>
)

Disabled State

Hello!

() => <WarningButton disabled>Hello!</WarningButton>

Loading State

Click me!

() => <WarningButton onPress={resolveIn(1000)}>Click me!</WarningButton>