Skip to content
Docs
Components
Touchables
IconButton

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.

TypeRequiredDefault
StyleProp<ViewStyle>No

colorScheme

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

TypeRequiredDefault
stringNo

size

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

TypeRequiredDefault
stringNo

full

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

TypeRequiredDefault
booleanNo

isRound

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

TypeRequiredDefault
booleanNo

_pressed

The properties to apply when `pressed` is true.

TypeRequiredDefault
CustomStyleObjectNo