IconButton | NativeBase

3.4.x

Search

⌘

K

Introduction

Getting Started

Setup NativeBase Provider

Resources

Core Concepts

Features

Color mode (Dark Mode)

NativeBase Factory

SafeAreaView Props

Theme

Customizing Theme

Customizing Fonts

Customizing Components

Making components dark mode compatible

Layout

VStack / Column

Forms

Data Display

Feedback

Typography

Overlay

Disclosure

Media and Icons

Transition

PresenceTransition

Others

ReactNative Components

KeyboardAvoidingView

Hooks

useBreakpointValue

useColorModeValue

useContrastText

useAccessibleColors

Examples

Community Integration

React Hook Forms

Recipes

Designs

Drawer Navigation

Forms

Form with Validation

Login/Signup Forms

Layout

Migration

Components Migration

More

If you are starting a new project, please try gluestack-ui for better performance and new design.

IconButton

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

Examples

Basic


Playground
const Example = () => {
  return <IconButton variant="solid" icon={<Icon size="md" as={<AntDesign name="search1" />} color="white" />} />;
};const Example = () => {
  return <IconButton variant="solid" icon={<Icon size="md" as={<AntDesign name="search1" />} color="white" />} />;
};

Sizes


Playground
const Example = () => {
  return <IconButton variant="solid" icon={<Icon size="md" as={<AntDesign name="search1" />} color="white" />} />;
};const Example = () => {
  return <IconButton variant="solid" icon={<Icon size="md" as={<AntDesign name="search1" />} color="white" />} />;
};

Variants


Playground
const Example = () => {
  return <IconButton variant="solid" icon={<Icon size="md" as={<AntDesign name="search1" />} color="white" />} />;
};const Example = () => {
  return <IconButton variant="solid" icon={<Icon size="md" as={<AntDesign name="search1" />} color="white" />} />;
};

Props

IconButton implements

,

,

,

,

,

,

,

,

,

,

,

,

BackgroundProps

,

,

,

icon

The icon to be used. Refer to the Icon section of the docs for the available icon options.

Type: Element

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

.

Quick Nav

MadeWithNativeBase