React Native Starter
Search…
Button
Buttons allow users to take actions, and make choices, with a single tap.
Default button size is
medium and status color is primary.1
import { Button } from '../components'
2
3
<Button
4
style={styles.demoButton}
5
primary
6
caption="Button"
7
onPress={() => {}}
8
/>
Copied!
Button can be disabled with
disabled property.1
import { Button } from '../components'
2
3
<Button
4
style={styles.demoButton}
5
primary
6
disabled
7
caption="Button"
8
onPress={() => {}}
9
/>
Copied!
Button can be styled with
rounded, bordered properties.1
import { Button } from '../components'
2
3
<Button
4
style={styles.demoButton}
5
primary
6
rounded
7
caption="Button"
8
onPress={() => {}}
9
/>
10
11
<Button
12
style={styles.demoButton}
13
primary
14
bordered
15
caption="Button"
16
onPress={() => {}}
17
/>
18
19
<Button
20
style={styles.demoButton}
21
primary
22
rounded
23
bordered
24
caption="Button"
25
onPress={() => {}}
26
/>
Copied!
Button can be used with icon.
1
import { Button } from '../components'
2
3
<Button
4
style={styles.demoButton}
5
primary
6
rounded
7
icon={<Icon />}
8
caption="Button"
9
onPress={() => {}}
10
/>
Copied!
Buttons can be resized by using
sm, md, lg property.1
import { Button } from '../components'
2
3
<Button
4
style={styles.demoButton}
5
primary
6
sm
7
icon={<Icon />}
8
caption="Button"
9
onPress={() => {}}
10
/>
11
12
<Button
13
style={styles.demoButton}
14
primary
15
icon={<Icon />}
16
caption="Button"
17
onPress={() => {}}
18
/>
19
20
<Button
21
style={styles.demoButton}
22
primary
23
lg
24
icon={<Icon />}
25
caption="Button"
26
onPress={() => {}}
27
/>
Copied!
You can specify background-color properties.
1
import { Button } from '../components'
2
import { colors } from '../../styles';
3
4
<Button
5
style={styles.demoButton}
6
bgColor={colors.green}
7
icon={<Icon />}
8
caption="Button"
9
onPress={() => {}}
10
/>
11
12
<Button
13
style={styles.demoButton}
14
primary
15
icon={<Icon />}
16
caption="Button"
17
onPress={() => {}}
18
/>
19
20
<Button
21
style={styles.demoButton}
22
secondary
23
icon={<Icon />}
24
caption="Button"
25
onPress={() => {}}
26
/>
Copied!
Last modified 1yr ago
Copy link