Button

A Jetpack Compose Button component for displaying native buttons.

Android

GitHub

npm

Changelog

Bundled version:

~55.0.0

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'