This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 55).

IconButton

Jetpack Compose IconButton components for displaying native Material3 icon buttons.

Android

GitHub

npm

Changelog

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

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`	-