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

TextButton

A Jetpack Compose TextButton component for text-styled buttons.

Android

GitHub

npm

Changelog

Expo UI TextButton matches the official Jetpack Compose Text Button API and displays a button without a background container, using only text as the visual element.

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 text button

BasicTextButtonExample.tsx

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

export default function BasicTextButtonExample() {
  return (
    <Host matchContents>
      <TextButton onPress={() => console.log('Pressed')}>Click me</TextButton>
    </Host>
  );
}

Disabled text button

Set the disabled prop to prevent user interaction.

DisabledTextButtonExample.tsx

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

export default function DisabledTextButtonExample() {
  return (
    <Host matchContents>
      <TextButton disabled onPress={() => console.log('Pressed')}>
        Disabled
      </TextButton>
    </Host>
  );
}

Text button with custom color

Use the color prop to change the button text color.

CustomColorTextButtonExample.tsx

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

export default function CustomColorTextButtonExample() {
  return (
    <Host matchContents>
      <Column>
        <TextButton color="#E91E63" onPress={() => console.log('Pink')}>
          Pink button
        </TextButton>
        <TextButton color="#4CAF50" onPress={() => console.log('Green')}>
          Green button
        </TextButton>
      </Column>
    </Host>
  );
}

API

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

Component

`TextButton`

Android

Type: React.Element<TextButtonProps>

A text button component that displays a clickable text label.

TextButtonProps

`children`

Android

Optional • Literal type: union

The text content to display in the button.

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

`color`

Android

Optional • Type: ColorValue

The color of the button text.

`disabled`

Android

Optional • Type: boolean

Whether the button is disabled.

`modifiers`

Android

Optional • Type: ExpoModifier[]

Modifiers for the component.

`onPress`

Android

Optional • Type: () => void

Callback that is called when the button is pressed.