IconButton composes the Button component. It is generally used to make an Icon pressable.
const Example = () => {
return <IconButton icon={<Icon as={Entypo} name="emoji-happy" />} borderRadius="full" _icon={{
color: "coolGray.50",
size: "md"
}} _hover={{
bg: "coolGray.800:alpha.20"
}} _pressed={{
bg: "coolGray.800:alpha.20",
_icon: {
name: "emoji-flirt"
},
_ios: {
_icon: {
size: "2xl"
}
}
}} _ios={{
_icon: {
size: "2xl"
}
}} />;
};
const Example = () => {
return <Box alignItems="center">
<IconButton icon={<Icon as={Entypo} name="emoji-happy" />} borderRadius="full" _icon={{
color: "orange.500",
size: "md"
}} _hover={{
bg: "orange.600:alpha.20"
}} _pressed={{
bg: "orange.600:alpha.20",
_icon: {
name: "emoji-flirt"
},
_ios: {
_icon: {
size: "2xl"
}
}
}} _ios={{
_icon: {
size: "2xl"
}
}} />
</Box>;
};
const Example = () => {
return <Center>
<VStack space={4} alignItems="center">
{["xs", "sm", "md", "lg"].map(size => <IconButton size={size} variant="solid" _icon={{
as: MaterialIcons,
name: "menu"
}} />)}
</VStack>
</Center>;
};
const Example = () => {
return <Center>
<VStack space={4} alignItems="center">
{["outline", "solid", "ghost"].map(variant => <IconButton colorScheme="indigo" key={variant} variant={variant} _icon={{
as: AntDesign,
name: "search1"
}} />)}
</VStack>
</Center>;
};
IconButton implements
,
,
,
,
,
,
,
,
,
,
,
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 .Use accessibilityLabel for labelling icon buttons to make sure it's announced by screen reader devices.
IconButton has a
role set to
.
