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"
    }
  }} />;
};

Examples

Basic


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>;
};

Sizes


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

Variants


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>;
};

Props

IconButton implements

colorScheme

The color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red").

Type: string

Default: 'primary'

variant

The variant of the button style to use.

Type: ResponsiveValue<"outline" | "unstyled" | "solid" | "ghost" | (string & {})>

Default: 'ghost'

size

The size of the button.

Type: ResponsiveValue<number | "px" | "full" | "sm" | "6" | "2xs" | "8" | "xs" | "12" | "md" | "16" | "xl" | "24" | "32" | "2" | "0.5" | "4" | "3" | "lg" | "1" | "2xl" | "10" | "20" | "64" | "0" | "container" | ... 28 more ... | (string & {})>

isDisabled

If true, the button will be disabled.

Type: boolean

icon

The icon to be used. Refer to the Icon section of the docs for the available icon options.

Type: Element

_icon

Props to be passed to the icon used inside of IconButton.

Type:

IIconProps

_hover

Style props to be applied when hovered