Component

IconButton

Compact icon-only action button with sizes, states, and accessible labels.

React Native

Icon button sizes

Icon-only actions for toolbars and compact rows.

import { useState } from 'react';
import { IconButton } from '@sohantalukder/rn-kit';

export function NotificationAction() {
  const [isActive, setIsActive] = useState(false);

  return (
    <IconButton
      icon={isActive ? 'check' : 'notification'}
      accessibilityLabel="Notifications"
      size="medium"
      showDot={!isActive}
      onPress={() => setIsActive((value) => !value)}
    />
  );
}

Live component

smallmediumlargedisabled

Always provide an accessibility label.
Use recognizable icons for repeated toolbar actions.

Usage

import { IconButton } from '@sohantalukder/rn-kit';

import { useState } from 'react';
import { IconButton } from '@sohantalukder/rn-kit';

export function NotificationAction() {
  const [isActive, setIsActive] = useState(false);

  return (
    <IconButton
      icon={isActive ? 'check' : 'notification'}
      accessibilityLabel="Notifications"
      size="medium"
      showDot={!isActive}
      onPress={() => setIsActive((value) => !value)}
    />
  );
}

Props

These are the most important props to consider first. The custom preview highlights the common setup before you move into app-specific states.

PropTypeDefaultDescription

iconIconKey | ReactNode-Icon rendered before content or as the primary visual affordance.

sizeComponentSize | numbermediumControls the rendered component scale.

showDotbooleanfalseShows a small notification dot on an icon button.

disabledbooleanfalsePrevents interaction and renders the disabled visual state.

bgColorColorValuethemeOverrides the screen background color supplied by the theme.

iconColorColorValuethemeOverrides the icon fill or stroke color.

onPress() => void-Called when the pressable component is activated.

Theme

IconButton reads from the rn-kit theme context where applicable. Wrap your app with ThemeProvider and prefer package theme tokens over hardcoded screen-level colors.

Variants

small
medium
large
disabled

Best Practices

Always provide an accessibility label.
Use recognizable icons for repeated toolbar actions.