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={() => {}}
/>
Last modified 2yr ago
Copy link