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

ToggleButton

Jetpack Compose ToggleButton components for displaying native Material3 toggle buttons.

Android

GitHub

npm

Changelog

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

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

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';

Components

`FilledIconToggleButton`

Android

Type: React.Element<ToggleButtonProps>

A filled icon toggle button with a solid background.

`IconToggleButton`

Android

Type: React.Element<ToggleButtonProps>

An icon toggle button with no background.

`OutlinedIconToggleButton`

Android

Type: React.Element<ToggleButtonProps>

An outlined icon toggle button with a border and no fill.

`ToggleButton`

Android

Type: React.Element<ToggleButtonProps>

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

ToggleButtonProps

`checked`

Android

Type: boolean

Whether the toggle button is checked.

`children`

Android

Type: React.ReactNode

Content to display inside the toggle button.

`colors`

Android

Optional • Type: ToggleButtonColors

Colors for toggle button elements.

`enabled`

Android

Optional • Type: boolean • Default: true

Whether the button is enabled for user interaction.

`modifiers`

Android

Optional • Type: ModifierConfig[]

Modifiers for the component.

`onCheckedChange`

Android

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

Callback that is called when the checked state changes.

Types

`ToggleButtonColors`

Android

Colors for toggle button elements.

Property	Type	Description
checkedContainerColor(optional)	`ColorValue`	-
checkedContentColor(optional)	`ColorValue`	-
containerColor(optional)	`ColorValue`	-
contentColor(optional)	`ColorValue`	-
disabledContainerColor(optional)	`ColorValue`	-
disabledContentColor(optional)	`ColorValue`	-