IconButton | NativeBase | Universal Components for React and React Native

Data Display
Typography
Disclosure
Media and Icons
Others
IconButton
IconButton composes 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">
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. Checkout the default theme of 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