Button

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