Buttons and Touchable

Btn (Button)

Sample

<Btn label={'Primary Button'} />

<Btn label={'Secondary Button'} type="secondary" />

<Btn label={'Warning Button'} type="warning" />

<Btn label={'Light Button'} type="light" />

<Btn label={'Success Button'} type="success" />

<Btn label={'Primary Outline Button'} type="primary-outline" />

<Btn label={'Secondary Outline Button'} type="secondary-outline" />

<Btn label={'Warning Outline Button'} type="warning-outline" />

<Btn label={'Light Outline Button'} type="light-outline" />

<Btn label={'Success Outline Button'} type="success-outline" />

<Btn label={'Primary Button'} block={false} />

<Btn label={'Primary Outline Button'} type={'primary-outline'} block={false} />

Props	Type	Description
label	String
onPress	Function
type	String	secondary, warning, light, success, primary-outline, secondary-outline, warning-outline, light-outline, success-outline
block	Boolean

Output

Note: Btn doesn't have a default spacing from bottom. Out captured with a Space component. If you want space after Btn component use Space.

IconBtn

Sample

<IconBtn 
	icon={'user'}
	onPress={() => console.log('do something')}
/>

<IconBtn 
	icon={'shopping-cart'}
	onPress={() => console.log('do something')}
	badge={1}
/>

Output