IconButton | NativeBase


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">
        {["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>;
};

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<"link" | "unstyled" | "subtle" | "solid" | "ghost" | "outline" | (string & {})>

Default: 'ghost'

size

The size of the button.

Type: ResponsiveValue<number | "full" | "sm" | "6" | "2xs" | "2" | "8" | "xs" | "3" | "12" | "md" | "4" | "16" | "xl" | "5" | "24" | "32" | "7" | "0.5" | "lg" | "1" | "2xl" | "2.5" | "1.5" | "10" | "20" | "64" | ... 27 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: InterfaceIconProps

_hover

Style props to be applied when hovered

Type: InterfaceIconButtonProps