IconButton

Jetpack Compose IconButton components for displaying native Material3 icon buttons.

Android

Recommended version:

~55.0.17

Expo UI provides four icon button components that match the official Jetpack Compose IconButton API: IconButton, FilledIconButton, FilledTonalIconButton, and OutlinedIconButton. All variants share the same props and accept composable children for content.

Installation

Terminal

- npx expo install @expo/ui

- yarn expo install @expo/ui

- pnpm expo install @expo/ui

- bun expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

Usage

Basic icon button

A standard icon button with no background, typically used for toolbar actions.

BasicIconButtonExample.tsx

import { Host, IconButton, Icon } from '@expo/ui/jetpack-compose';

export default function BasicIconButtonExample() {
  return (
    <Host matchContents>
      <IconButton onClick={() => alert('Pressed!')}>
        <Icon source={require('./assets/settings.xml')} size={24} />
      </IconButton>
    </Host>
  );
}

Icon button variants

Use different icon button components to convey varying levels of emphasis.

IconButtonVariantsExample.tsx

import {
  Host,
  IconButton,
  FilledIconButton,
  FilledTonalIconButton,
  OutlinedIconButton,
  Icon,
  Row,
} from '@expo/ui/jetpack-compose';

export default function IconButtonVariantsExample() {
  return (
    <Host matchContents>
      <Row horizontalArrangement={{ spacedBy: 8 }}>
        <IconButton onClick={() => {}}>
          <Icon source={require('./assets/star.xml')} size={24} />
        </IconButton>
        <FilledIconButton onClick={() => {}}>
          <Icon source={require('./assets/star.xml')} size={24} />
        </FilledIconButton>
        <FilledTonalIconButton onClick={() => {}}>
          <Icon source={require('./assets/star.xml')} size={24} />
        </FilledTonalIconButton>
        <OutlinedIconButton onClick={() => {}}>
          <Icon source={require('./assets/star.xml')} size={24} />
        </OutlinedIconButton>
      </Row>
    </Host>
  );
}

API

import {
  IconButton,
  FilledIconButton,
  FilledTonalIconButton,
  OutlinedIconButton,
} from '@expo/ui/jetpack-compose';

No API data file found, sorry!