IconButton

IconButton composes the Button component. It is generally used to make an Icon pressable.

Examples

Basic

Sizes

Variants

Props

Name	Type	Description	Default
colorScheme	string	The color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red").	'primary'
variant	ResponsiveValue<"solid" | "outline" | "ghost" | "unstyled">	The variant of the button style to use.	'ghost'
size	ResponsiveValue<number | (string & {}) | "px" | "container" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "0" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "5" | "6" | "7" | ... 30 more ... | "full">	The size of the button.	-
isDisabled	boolean	If true, the button will be disabled.	-
icon	Element	The icon to be used. Refer to the Icon section of the docs for the available icon options.	-
_icon	IIconProps	Props to be passed to the icon used inside of IconButton.	-
_hover	IIconButtonProps	Style props to be applied when hovered	-
_pressed	IIconButtonProps	Style props to be applied when pressed	-
_focus	IIconButtonProps	Style props to be applied when focus	-

IconButton implements Pressable, Icon

Styling

NativeBase ships with a default theme for each component. Checkout the default theme of iconButton

We can easily extend the iconButton component theme using extendTheme function as shown below.

import { extendTheme, NativeBaseProvider } from "native-base";

const theme = extendTheme({

components: {

IconButton: {

baseStyle: {},

defaultProps: {},

variants: {},

sizes: {},

}

}

});

function MyApp() {

return (

<NativeBaseProvider theme={theme}>

{/* Rest of the app goes here */}

</NativeBaseProvider>

)

}

Read more about extending component theme here.

Accessibility

• Use accessibilityLabel for labelling icon buttons to make sure it's announced by screen reader devices.
• IconButton has a role set to button.