IconButton

A Jetpack Compose IconButton component for displaying tappable icon buttons.

Android

GitHub

npm

Changelog

Bundled version:

~55.0.0

An icon button component that wraps an icon in a tappable container with different visual variants. See the official Jetpack Compose documentation for more information.

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

BasicIconButton.tsx

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

export default function BasicIconButton() {
  return (
    <Host matchContents>
      <IconButton onPress={() => console.log('Pressed')}>
        <Icon source={require('./assets/favorite.xml')} contentDescription="Favorite" />
      </IconButton>
    </Host>
  );
}

Variants

Use the variant prop to change the visual style of the button. Available variants are 'default', 'bordered', and 'outlined'.

IconButtonVariants.tsx

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

export default function IconButtonVariants() {
  return (
    <Host matchContents>
      <IconButton variant="default" onPress={() => console.log('Default')}>
        <Icon source={require('./assets/favorite.xml')} contentDescription="Default" />
      </IconButton>
      <IconButton variant="bordered" onPress={() => console.log('Bordered')}>
        <Icon source={require('./assets/favorite.xml')} contentDescription="Bordered" />
      </IconButton>
      <IconButton variant="outlined" onPress={() => console.log('Outlined')}>
        <Icon source={require('./assets/favorite.xml')} contentDescription="Outlined" />
      </IconButton>
    </Host>
  );
}

Disabled

Set the disabled prop to prevent interaction.

DisabledIconButton.tsx

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

export default function DisabledIconButton() {
  return (
    <Host matchContents>
      <IconButton disabled onPress={() => console.log('Pressed')}>
        <Icon source={require('./assets/favorite.xml')} contentDescription="Favorite" />
      </IconButton>
    </Host>
  );
}

API

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

Component

`IconButton`

Android

Type: React.Element<IconButtonProps>

Displays a native button component.

IconButtonProps

`children`

Android

Optional • Type: React.JSX.Element

The text to display inside the button.

`color`

Android

Optional • Type: ColorValue

Button color.

`disabled`

Android

Optional • Type: boolean

Disabled state of the button.

`elementColors`

Android

Optional • Type: ButtonElementColors

Colors for button's core elements.

`modifiers`

Android

Optional • Type: ExpoModifier[]

Modifiers for the component.

`onPress`

Android

Optional • Type: () => void

A callback that is called when the button is pressed.

`shape`

Android

Optional • Type: ShapeJSXElement

`variant`

Android

Optional • Type: IconButtonVariant

The button variant.

Types

`IconButtonVariant`

Android

Literal Type: string

The built-in button styles available on Android.

outlined - A button with an outline.
elevated - A filled button with a shadow.

Acceptable values are: 'default' | 'bordered' | 'outlined'