IconButton

Jetpack Compose IconButton components for displaying native Material3 icon buttons.

Android

Included in Expo Go

GitHub

npm

Changelog

Recommended version:

~56.0.26

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.

Filled, filled tonal, and standard Material 3 icon buttons

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';

Components

`FilledIconButton`

Android

Type: React.Element<IconButtonProps>

A filled icon button with a solid background.

`FilledTonalIconButton`

Android

Type: React.Element<IconButtonProps>

A filled tonal icon button with a muted background.

`IconButton`

Android

Type: React.Element<IconButtonProps>

A standard icon button with no background.

IconButtonProps

`children`

Android

Type: React.ReactNode

Content to display inside the icon button.

`colors`

Android

Optional • Type: IconButtonColors

Colors for icon button elements.

`enabled`

Android

Optional • Type: boolean • Default: true

Whether the icon button is enabled for user interaction.

`modifiers`

Android

Optional • Type: ModifierConfig[]

Modifiers for the component.

`onClick`

Android

Optional • Type: () => void

Callback that is called when the icon button is clicked.

`shape`

Android

Optional • Type: ShapeJSXElement

The shape of the icon button.

`OutlinedIconButton`

Android

Type: React.Element<IconButtonProps>

An outlined icon button with a border and no fill.

Types

`IconButtonColors`

Android

Colors for icon button elements.

Property	Type	Description
containerColor(optional)	`ColorValue`	-
contentColor(optional)	`ColorValue`	-
disabledContainerColor(optional)	`ColorValue`	-
disabledContentColor(optional)	`ColorValue`	-