IconButton | NativeBase | Universal Components for React and React Native
IMPORTANT MESSAGE
Upgrade to gluestack-ui
If you are starting a new project with NativeBase, we recommend using gluestack-ui
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase.
Migrate to gluestack-ui
If you are working on a project with NativeBase, we recommend using @gluestack-ui/themed
NativeBase
3.4.x
Light mode active 🚨
Do you really want to stay here? Really? Really? Pakka? Sure? Are you a true developer?
No
Back to DarkMode
Disclosure
If you are starting a new project, please try gluestack-ui for better performance and new design.
IconButton
IconButton consists of the Button component. It is generally used to make an Icon pressable.
Show Codeconst 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
Playgroundconst 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
Playgroundconst 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
Playgroundconst 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: ColorSchemeType
Default: 'primary'
variant
The variant of the button style to use.
Type: ResponsiveValue<"link" | "subtle" | "solid" | "ghost" | "outline" | (string & {}) | "unstyled">
Default: 'ghost'
size
The size of the button.
Type: ThemeComponentSizeType<"IconButton"> & ThemeComponentSizeType<"Icon">
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: Partial<IIconProps>
_hover
Style props to be applied when hovered
Type: Omit<Partial<IIconButtonProps>, "_hover">
_pressed
Style props to be applied when pressed
Type: Omit<Partial<IIconButtonProps>, "_pressed">
_focus
Style props to be applied when focus
Type: Omit<Partial<IIconButtonProps>, "_focus">
Styling
NativeBase ships with a default theme for each component. Check out the default theme of the iconButton.
Info: We can easily extend the iconButton component theme using extendTheme function as described in the documentation .
Accessibility
Use accessibilityLabel for labelling icon buttons to make sure it's announced by screen reader devices.
IconButton has a role set to .
MadeWithNativeBase