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

ToggleButton

A Jetpack Compose ToggleButton component for togglable buttons.

Android

GitHub

npm

Changelog

Expo UI ToggleButton matches the official Jetpack Compose Toggle Button API and provides a button that switches between checked and unchecked states with multiple visual variants.

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

BasicToggleButtonExample.tsx

import { useState } from 'react';
import { Host, ToggleButton } from '@expo/ui/jetpack-compose';

export default function BasicToggleButtonExample() {
  const [checked, setChecked] = useState(false);

  return (
    <Host matchContents>
      <ToggleButton
        checked={checked}
        text="Favorite"
        onCheckedChange={value => setChecked(value)}
      />
    </Host>
  );
}

Toggle button variants

Use the variant prop to switch between 'default', 'icon', 'filledIcon', and 'outlinedIcon' styles.

ToggleButtonVariantsExample.tsx

import { useState } from 'react';
import { Host, ToggleButton, Column } from '@expo/ui/jetpack-compose';
import { paddingAll } from '@expo/ui/jetpack-compose/modifiers';

export default function ToggleButtonVariantsExample() {
  const [checked1, setChecked1] = useState(false);
  const [checked2, setChecked2] = useState(true);
  const [checked3, setChecked3] = useState(false);
  const [checked4, setChecked4] = useState(true);

  return (
    <Host matchContents>
      <Column modifiers={[paddingAll(16)]}>
        <ToggleButton
          checked={checked1}
          text="Default"
          variant="default"
          onCheckedChange={value => setChecked1(value)}
        />
        <ToggleButton
          checked={checked2}
          text="Icon"
          variant="icon"
          onCheckedChange={value => setChecked2(value)}
        />
        <ToggleButton
          checked={checked3}
          text="Filled Icon"
          variant="filledIcon"
          onCheckedChange={value => setChecked3(value)}
        />
        <ToggleButton
          checked={checked4}
          text="Outlined Icon"
          variant="outlinedIcon"
          onCheckedChange={value => setChecked4(value)}
        />
      </Column>
    </Host>
  );
}

Toggle button with custom color

CustomColorToggleButtonExample.tsx

import { useState } from 'react';
import { Host, ToggleButton } from '@expo/ui/jetpack-compose';

export default function CustomColorToggleButtonExample() {
  const [checked, setChecked] = useState(true);

  return (
    <Host matchContents>
      <ToggleButton
        checked={checked}
        text="Custom color"
        color="#E91E63"
        onCheckedChange={value => setChecked(value)}
      />
    </Host>
  );
}

Disabled toggle button

DisabledToggleButtonExample.tsx

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

export default function DisabledToggleButtonExample() {
  return (
    <Host matchContents>
      <ToggleButton checked={false} text="Disabled" disabled />
    </Host>
  );
}

API

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

Component

`ToggleButton`

Android

Type: React.Element<ToggleButtonProps>

A toggle button component that can be toggled on and off.

When text prop is provided, it displays the text. Otherwise, custom children can be passed to render custom content.

ToggleButtonProps

`checked`

Android

Type: boolean

Whether the toggle button is checked.

`children`

Android

Optional • Type: React.ReactNode

The content to display inside the toggle button.

`color`

Android

Optional • Type: ColorValue

The color of the toggle button when checked.

`disabled`

Android

Optional • Type: boolean

Whether the button is disabled.

`modifiers`

Android

Optional • Type: ExpoModifier[]

Modifiers for the component.

`onCheckedChange`

Android

Optional • Type: (checked: boolean) => void

Callback that is called when the checked state changes.

`text`

Android

Optional • Type: string

Text to display in the button.

`variant`

Android

Optional • Literal type: string • Default: 'default'

The variant of the toggle button.

'default' - Material 3 ToggleButton
'icon' - Icon toggle button
'filledIcon' - Filled icon toggle button
'outlinedIcon' - Outlined icon toggle button

Acceptable values are: 'default' | 'icon' | 'filledIcon' | 'outlinedIcon'