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

Button

A Jetpack Compose Button component for displaying native buttons.

Android

GitHub

npm

Changelog

Expo UI Button matches the official Jetpack Compose Button API and supports variants, icons, custom colors, and shapes.

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 button

BasicButtonExample.tsx

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

export default function BasicButtonExample() {
  return (
    <Host matchContents>
      <Button onPress={() => alert('Pressed!')}>Press me</Button>
    </Host>
  );
}

Button variants

Use the variant prop to change the button's appearance. Available variants are: default, bordered, borderless, outlined, and elevated.

ButtonVariantsExample.tsx

import { Host, Button, Column } from '@expo/ui/jetpack-compose';

export default function ButtonVariantsExample() {
  return (
    <Host matchContents>
      <Column verticalArrangement={{ spacedBy: 8 }}>
        <Button variant="default" onPress={() => {}}>
          Default
        </Button>
        <Button variant="bordered" onPress={() => {}}>
          Bordered
        </Button>
        <Button variant="borderless" onPress={() => {}}>
          Borderless
        </Button>
        <Button variant="outlined" onPress={() => {}}>
          Outlined
        </Button>
        <Button variant="elevated" onPress={() => {}}>
          Elevated
        </Button>
      </Column>
    </Host>
  );
}

API

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

Component

`Button`

Android

Type: React.Element<ButtonProps>

Displays a native button component.

ButtonProps

`children`

Android

Optional • Literal type: union

The text to display inside the button.

Acceptable values are: string | string[] | React.JSX.Element

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

`leadingIcon`

Android

Optional • Type: MaterialIcon

A string describing the leading icon to display in the button. Uses Material Icons on Android.

`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

Deprecated: Use leadingIcon instead.

`systemImage`

Android

Optional • Type: MaterialIcon

A string describing the system image to display in the button. Uses Material Icons on Android.

`trailingIcon`

Android

Optional • Type: MaterialIcon

A string describing the trailing icon to display in the button. Uses Material Icons on Android.

`variant`

Android

Optional • Type: ButtonVariant

The button variant.

Types

`ButtonElementColors`

Android

Colors for button's core elements.

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

`ButtonVariant`

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' | 'borderless' | 'outlined' | 'elevated'