Version: 3.2.0

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.