A component that should be used to indicate the primary action to be taken on a particular page. Used when the primary action is positive (ie, creating something in your application). There should be only one PrimaryButton per page.

If onPress returns a promise, the button will show a loading state for the duration of the promise.

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">
    <PrimaryButton size="small" style={{ marginRight: 10 }}>
      Small Button
    </PrimaryButton>
    <PrimaryButton size="medium" style={{ marginRight: 10 }}>
      Medium Button
    </PrimaryButton>
    <PrimaryButton size="large">Large Button</PrimaryButton>
  </FlexRow>
)

Disabled State

Hello!

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

Loading State

Click me!

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