Button

Buttons allow users to take actions, and make choices, with a single tap.

Default button size is medium and status color is primary.

import { Button } from '../components'

<Button
   style={styles.demoButton}
   primary
   caption="Button"
   onPress={() => {}}
/>

Button can be disabled with disabled property.

import { Button } from '../components'

<Button
   style={styles.demoButton}
   primary
   disabled
   caption="Button"
   onPress={() => {}}
/>

Button can be styled with rounded, bordered properties.

import { Button } from '../components'

<Button
   style={styles.demoButton}
   primary
   rounded
   caption="Button"
   onPress={() => {}}
/>

<Button
   style={styles.demoButton}
   primary
   bordered
   caption="Button"
   onPress={() => {}}
/>

<Button
   style={styles.demoButton}
   primary
   rounded
   bordered
   caption="Button"
   onPress={() => {}}
/>

Button can be used with icon.

import { Button } from '../components'

<Button
   style={styles.demoButton}
   primary
   rounded
   icon={<Icon />}
   caption="Button"
   onPress={() => {}}
/>

Buttons can be resized by using sm, md, lg property.

import { Button } from '../components'

<Button
   style={styles.demoButton}
   primary
   sm
   icon={<Icon />}
   caption="Button"
   onPress={() => {}}
/>

<Button
   style={styles.demoButton}
   primary
   icon={<Icon />}
   caption="Button"
   onPress={() => {}}
/>

<Button
   style={styles.demoButton}
   primary
   lg
   icon={<Icon />}
   caption="Button"
   onPress={() => {}}
/>

You can specify background-color properties.

import { Button } from '../components'
import { colors } from '../../styles';

<Button
   style={styles.demoButton}
   bgColor={colors.green}
   icon={<Icon />}
   caption="Button"
   onPress={() => {}}
/>

<Button
   style={styles.demoButton}
   primary
   icon={<Icon />}
   caption="Button"
   onPress={() => {}}
/>

<Button
   style={styles.demoButton}
   secondary
   icon={<Icon />}
   caption="Button"
   onPress={() => {}}
/>