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

Button

GitHub

Changelog

npm

A SwiftUI Button component for displaying native buttons.

iOS

tvOS

The borderless variant is not available on Apple TV.

A button component for displaying native buttons.

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

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

<Host style={{ flex: 1 }}>
  <Button
    variant="default"
    onPress={() => {
      setEditingProfile(true);
    }}>
    Edit profile
  </Button>
</Host>

See Official SwiftUI documentation for more information.

API

Component

`Button`

iOS

tvOS

Type: React.Element<ButtonProps>

Displays a native button component.

ButtonProps

`children`

iOS

tvOS

Optional • Literal type: union

The text or React node to display inside the button.

Acceptable values are: string | React.ReactNode

`color`

iOS

tvOS

Optional • Type: ColorValue

Button color.

`controlSize`

iOS

tvOS

Optional • Type: ButtonControlSize

The size for controls within this view.

`disabled`

iOS

tvOS

Optional • Type: boolean

Disabled state of the button.

`onPress`

iOS

tvOS

Optional • Type: () => void

A callback that is called when the button is pressed.

`role`

iOS

tvOS

Optional • Type: ButtonRole

Indicated the role of the button.

`systemImage`

iOS

tvOS

Optional • Type: SFSymbol

A string describing the system image to display in the button. This is only used if children is a string. Uses SF Symbols.

`variant`

iOS

tvOS

Optional • Type: ButtonVariant

The button variant.

Inherited Props

CommonViewModifierProps

Types

`ButtonControlSize`

iOS

tvOS

Literal Type: string

Sets the size for controls within this view.

mini - A control version that is minimally sized.
small - A control version that is proportionally smaller size for space-constrained views.
regular - A control version that is the default size.
large - A control version that is prominently sized.
extraLarge - A control version that is substantially sized. The largest control size. Resolves to ControlSize.large on platforms other than visionOS.

Acceptable values are: 'mini' | 'small' | 'regular' | 'large' | 'extraLarge'

`ButtonRole`

iOS

tvOS

Literal Type: string

The role of the button.

default - The default button role.
cancel - A button that cancels the current operation.
destructive - A button that deletes data or performs a destructive action.

Acceptable values are: 'default' | 'cancel' | 'destructive'

`ButtonVariant`

iOS

tvOS

Literal Type: string

The built-in button styles available on iOS.

Common styles:

default - The default system button style.
bordered - A button with a light fill. On Android, equivalent to FilledTonalButton.
borderless - A button with no background or border. On Android, equivalent to TextButton.
borderedProminent - A bordered button with a prominent appearance.
plain - A button with no border or background and a less prominent text.
glass – A liquid glass button effect – (available only from iOS 26, when built with Xcode 26)
glassProminent – A liquid glass button effect – (available only from iOS 26, when built with Xcode 26) macOS-only styles:
accessoryBar - A button style for accessory bars.
accessoryBarAction - A button style for accessory bar actions.
card - A button style for cards.
link - A button style for links.