IconButton | NativeBase | Universal Components for React and React Native

Show Code
Playground
const Example = () => {
  return <IconButton icon={<Icon as={Entypo} name="emoji-happy" />} borderRadius="full" _icon={{
    color: 'coolGray.50',
    size: 'md'
  }} _hover={{
    bg: 'coolGray.800:alpha.20'
  }} _pressed={{
    bg: 'coolGray.800:alpha.20',
    _icon: {
      name: 'emoji-flirt'
    },
    _ios: {
      _icon: {
        size: '2xl'
      }
    }
  }} _ios={{
    _icon: {
      size: '2xl'
    }
  }} />;
};
const Example = () => {
  return <IconButton icon={<Icon as={Entypo} name="emoji-happy" />} borderRadius="full" _icon={{
    color: 'coolGray.50',
    size: 'md'
  }} _hover={{
    bg: 'coolGray.800:alpha.20'
  }} _pressed={{
    bg: 'coolGray.800:alpha.20',
    _icon: {
      name: 'emoji-flirt'
    },
    _ios: {
      _icon: {
        size: '2xl'
      }
    }
  }} _ios={{
    _icon: {
      size: '2xl'
    }
  }} />;
};

Playground
const Example = () => {
  return <Box alignItems="center">
      <IconButton icon={<Icon as={Entypo} name="emoji-happy" />} borderRadius="full" _icon={{
      color: "orange.500",
      size: "md"
    }} _hover={{
      bg: "orange.600:alpha.20"
    }} _pressed={{
      bg: "orange.600:alpha.20",
      _icon: {
        name: "emoji-flirt"
      },
      _ios: {
        _icon: {
          size: "2xl"
        }
      }
    }} _ios={{
      _icon: {
        size: "2xl"
      }
    }} />
    </Box>;
};
const Example = () => {
  return <Box alignItems="center">
      <IconButton icon={<Icon as={Entypo} name="emoji-happy" />} borderRadius="full" _icon={{
      color: "orange.500",
      size: "md"
    }} _hover={{
      bg: "orange.600:alpha.20"
    }} _pressed={{
      bg: "orange.600:alpha.20",
      _icon: {
        name: "emoji-flirt"
      },
      _ios: {
        _icon: {
          size: "2xl"
        }
      }
    }} _ios={{
      _icon: {
        size: "2xl"
      }
    }} />
    </Box>;
};

Playground
const Example = () => {
  return <Center>
      <VStack space={4} alignItems="center">
        {["xs", "sm", "md", "lg"].map(size => <IconButton size={size} variant="solid" _icon={{
        as: MaterialIcons,
        name: "menu"
      }} />)}
      </VStack>
    </Center>;
};
const Example = () => {
  return <Center>
      <VStack space={4} alignItems="center">
        {["xs", "sm", "md", "lg"].map(size => <IconButton size={size} variant="solid" _icon={{
        as: MaterialIcons,
        name: "menu"
      }} />)}
      </VStack>
    </Center>;
};

Playground
const Example = () => {
  return <Center>
      <VStack space={4} alignItems="center">
        {["outline", "solid", "ghost"].map(variant => <IconButton colorScheme="indigo" key={variant} variant={variant} _icon={{
        as: AntDesign,
        name: "search1"
      }} />)}
      </VStack>
    </Center>;
};
const Example = () => {
  return <Center>
      <VStack space={4} alignItems="center">
        {["outline", "solid", "ghost"].map(variant => <IconButton colorScheme="indigo" key={variant} variant={variant} _icon={{
        as: AntDesign,
        name: "search1"
      }} />)}
      </VStack>
    </Center>;
};