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={() => {}}
/>