IconButton

IconButton component that is based on Ficus UI Button component.

Import

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

Usage

Default

EDITABLE EXAMPLE

<VStack spacing={10}>
  <IconButton icon={<Icon name="home" />} size="xs" />
  <IconButton
    icon={<Icon name="home" />}
    colorScheme="pink"
    size="sm"
  />
  <IconButton icon={<Icon name="home" />} colorScheme="teal" />
  <IconButton
    icon={<Icon name="home" />}
    colorScheme="blue"
    size="lg"
  />
  <IconButton
    icon={<Icon name="home" />}
    colorScheme="red"
    size="xl"
  />
  <IconButton
    icon={<Icon name="home" />}
    colorScheme="orange"
    size="2xl"
  />
</VStack>

Round

EDITABLE EXAMPLE

<VStack spacing={10}>
  <IconButton icon={<Icon name="home" />} size="xs" isRound />
  <IconButton
    icon={<Icon name="home" />}
    colorScheme="pink"
    size="sm"
    isRound
  />
  <IconButton
    icon={<Icon name="home" />}
    colorScheme="teal"
    isRound
  />
  <IconButton
    icon={<Icon name="home" />}
    colorScheme="blue"
    size="lg"
    isRound
  />
  <IconButton
    icon={<Icon name="home" />}
    colorScheme="red"
    size="xl"
    isRound
  />
  <IconButton
    icon={<Icon name="home" />}
    colorScheme="orange"
    size="2xl"
    isRound
  />
</VStack>

Variants

EDITABLE EXAMPLE

<Box>
  <HStack spacing={10}>
    <IconButton icon={<Icon name="home" />} colorScheme="teal" />
    <IconButton
      icon={<Icon name="home" />}
      colorScheme="teal"
      variant="outline"
    />
    <IconButton
      icon={<Icon name="home" />}
      colorScheme="teal"
      variant="ghost"
    />
  </HStack>
  <VStack spacing={10} mt="xl">
    <IconButton
      icon={<Icon name="home" />}
      colorScheme="teal"
      full
    />
    <IconButton
      icon={<Icon name="home" />}
      colorScheme="teal"
      variant="outline"
      full
    />
    <IconButton
      icon={<Icon name="home" />}
      colorScheme="teal"
      variant="ghost"
      full
    />
  </VStack>
</Box>

Props

Extends every Box props and react native Button component.

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

`style`

The style prop from React Native. Unlike the regular Pressable component, it does not accept a function.

Type	Required	Default
StyleProp<ViewStyle>	No	-

`colorScheme`

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

Type	Required	Default
string	No	blue

`size`

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

Type	Required	Default
string	No	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

`_pressed`

The properties to apply when `pressed` is true.

Type	Required	Default
CustomStyleObject	No	-

Button Pressable