ToggleButton

Jetpack Compose ToggleButton components for displaying native Material3 toggle buttons.

Android

Included in Expo Go

Recommended version:

~56.0.26

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,
} 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>
      <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>
    </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!