Version: 3.1.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
icon Element The icon to be used. Refer to the Icon section of the docs for the available icon options. -

IconButton implements Button, Pressable

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.