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

ToggleButton

Jetpack Compose ToggleButton components for displaying native Material3 toggle buttons.

Android

Included in Expo Go

Expo UI provides four toggle button components that match the official Jetpack Compose Toggle Button API: ToggleButton, IconToggleButton, FilledIconToggleButton, and OutlinedIconToggleButton.

A toggle button with text and two icon toggle buttons in checked and unchecked states

Installation

Terminal

- npx expo install @expo/ui

- yarn expo install @expo/ui

- pnpm expo install @expo/ui

- bun 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

A toggle button with text and icon content.

BasicToggleButtonExample.tsx

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

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

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

Icon toggle button variants

Use different icon toggle button components to convey varying levels of emphasis.

IconToggleButtonVariantsExample.tsx

import { useState } from 'react';
import {
  Host,
  IconToggleButton,
  FilledIconToggleButton,
  OutlinedIconToggleButton,
  Icon,
  Row,
  Surface,
} from '@expo/ui/jetpack-compose';

const starIcon = require('./assets/star.png');

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

  return (
    <Host matchContents>
      <Surface>
        <Row horizontalArrangement={{ spacedBy: 8 }}>
          <IconToggleButton
            checked={checked1}
            onCheckedChange={setChecked1}>
            <Icon source={starIcon} size={24} />
          </IconToggleButton>
          <FilledIconToggleButton
            checked={checked2}
            onCheckedChange={setChecked2}>
            <Icon source={starIcon} size={24} />
          </FilledIconToggleButton>
          <OutlinedIconToggleButton
            checked={checked3}
            onCheckedChange={setChecked3}>
            <Icon source={starIcon} size={24} />
          </OutlinedIconToggleButton>
        </Row>
      </Surface>
    </Host>
  );
}

Custom colors

Override checked and unchecked colors using the colors prop.

CustomColorsToggleButtonExample.tsx

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

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

  return (
    <Host matchContents>
      <ToggleButton
        checked={checked}
        onCheckedChange={setChecked}
        colors={{
          checkedContainerColor: '#4CAF50',
          checkedContentColor: '#FFFFFF',
          containerColor: '#E0E0E0',
          contentColor: '#333333',
        }}>
        <Text>{checked ? 'ON' : 'OFF'}</Text>
      </ToggleButton>
    </Host>
  );
}

Disabled toggle button

DisabledToggleButtonExample.tsx

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

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

API

import {
  ToggleButton,
  IconToggleButton,
  FilledIconToggleButton,
  OutlinedIconToggleButton,
} from '@expo/ui/jetpack-compose';

No API data file found, sorry!