IconButton | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Data Display
Typography
Disclosure
Media and Icons
Others
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase. If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).
IconButton
IconButton consists of the Button component. It is generally used to make an Icon pressable.
Show Code
Playground
Examples
Basic
Playground
Sizes
Playground
Variants
Playground
Props
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 .
Nativebase logo
MadeWithNativeBase