Button

Button component that is based on react native Button component.

Import

import { Button } from 'react-native-ficus-ui';

Usage

Default

EDITABLE EXAMPLE

<VStack spacing={10}>
  <Button onPress={() => console.log('PRESSED')}>Button</Button>
  <Button colorScheme="red">Button</Button>
  <Button colorScheme="orange">Button</Button>
  <Button colorScheme="green">Button</Button>
  <Button colorScheme="pink">Button</Button>
  <Button colorScheme="pink" full>
    Button
  </Button>
  <Button colorScheme="blue" full isLoading>
    Button
  </Button>
</VStack>

Button sizes

EDITABLE EXAMPLE

<VStack spacing={10}>
  <Button size="xs">Button</Button>
  <Button colorScheme="red" size="sm">
    Button
  </Button>
  <Button colorScheme="orange" size="md">
    Button
  </Button>
  <Button colorScheme="green" size="lg">
    Button
  </Button>
  <Button colorScheme="pink" size="xl">
    Button
  </Button>
  <Button colorScheme="blue" size="2xl">
    Button
  </Button>
</VStack>

Round

EDITABLE EXAMPLE

<VStack spacing={10}>
  <Button size="xs" isRound>
    Button
  </Button>
  <Button colorScheme="red" size="sm" isRound>
    Button
  </Button>
  <Button colorScheme="orange" size="md" isRound>
    Button
  </Button>
  <Button colorScheme="green" size="lg" isRound>
    Button
  </Button>
  <Button colorScheme="pink" size="xl" isRound>
    Button
  </Button>
</VStack>

Variants

EDITABLE EXAMPLE

<Box>
  <HStack spacing={10}>
    <Button colorScheme="teal">Button</Button>
    <Button colorScheme="teal" variant="outline">
      Button
    </Button>
    <Button colorScheme="teal" variant="ghost">
      Button
    </Button>
    <Button colorScheme="teal" variant="link">
      Button
    </Button>
  </HStack>
  <VStack spacing={10} mt="xl">
    <Button colorScheme="teal" full>
      Button
    </Button>
    <Button colorScheme="teal" variant="outline" full>
      Button
    </Button>
    <Button colorScheme="teal" variant="ghost" full>
      Button
    </Button>
    <Button colorScheme="teal" variant="outline" full isLoading>
      Button
    </Button>
  </VStack>
</Box>

Prefix and suffix

EDITABLE EXAMPLE

<VStack spacing={10}>
  <Button
    colorScheme="green"
    prefix={
      <Icon name="android1" color="white" fontSize="xl" mr="sm" />
    }
  >
    Button
  </Button>
  <Button
    colorScheme="green"
    suffix={
      <Icon name="android1" color="white" fontSize="xl" ml="sm" />
    }
  >
    Button
  </Button>
</VStack>

Props

Extends every Box props and react native Button component.

https://reactnative.dev/docs/button#props (opens in a new tab)

`colorScheme`

The colorScheme property, will define background color and overlay color.

Type	Required	Default
string	Yes	blue

`size`

The size property, will define the size of the button.

Type	Required	Default
string	Yes	'md'

`full`

The full property, if true, then the button takes all the width.

Type	Required	Default
boolean	No	false

`isRound`

The isRound property, if true, then the button will have a borderRadius fully round.

Type	Required	Default
boolean	No	false

SectionList IconButton