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="search1" />} size="xs" />
  <IconButton
    icon={<Icon name="search1" />}
    colorScheme="pink"
    size="sm"
  />
  <IconButton icon={<Icon name="search1" />} colorScheme="teal" />
  <IconButton
    icon={<Icon name="search1" />}
    colorScheme="blue"
    size="lg"
  />
  <IconButton
    icon={<Icon name="search1" />}
    colorScheme="red"
    size="xl"
  />
  <IconButton
    icon={<Icon name="search1" />}
    colorScheme="orange"
    size="2xl"
  />
</VStack>

Round

EDITABLE EXAMPLE

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

Variants

EDITABLE EXAMPLE

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

Props

Extends every Button props.

`icon`

The icon to display inside the button.

Type	Required
ReactNode	Yes

Button Pressable