ToggleIconButton

Compact icon-only button that carries an on/off state. Unselected it reads as a quiet, borderless glyph on the surface behind it; selected it fills with the primary color — the shape a formatting or filter control needs when several sit side by side and one or more may be active.

It is smaller than IconButton (the theme's height.small rather than height.medium), so a row of them fits inside a toolbar or a card header.

Basic Usage

import { ToggleIconButton } from '@multinaire/expo-ui';

const [bold, setBold] = useState(false);

<ToggleIconButton
  icon="TextBold"
  selected={bold}
  onPress={() => setBold(!bold)}
/>

ToggleIconButton is stateless — selected is yours to hold, so the same component works for a toggle you own and for state read back from elsewhere (a text editor's cursor, a query object, a permission set).

Props

Prop	Type	Default	Description
`icon`	`IconName`	—	Icon name displayed inside the button
`selected`	`boolean`	`false`	Whether the button reads as active. Fills with the primary color when set
`isLoading`	`boolean`	`false`	Show a loading animation and disable the button
`margin`	`SpacingProps`	—	Outer margin
`testID`	`string`	—	Test identifier for UI automation
`onPress`	`() => void`	—	Press handler. Omit it to render the button disabled (dimmed)

Examples

A row of toggles

<Card horizontal alignItems="center" gap={variables.gap.small} padding={variables.gap.small}>
  <ToggleIconButton icon="TextBold" selected={bold} onPress={toggleBold} />
  <ToggleIconButton icon="TextItalic" selected={italic} onPress={toggleItalic} />
  <ToggleIconButton icon="TextUnderline" selected={underline} onPress={toggleUnderline} />
</Card>

This is exactly how MarkdownToolbar is built — reach for that instead when the row is driving a MarkdownInput.

Single-select group

Nothing about the component enforces one-at-a-time; compare against the selected value to get radio behavior:

const [alignment, setAlignment] = useState('left');

{(['left', 'center', 'right'] as const).map(value => (
  <ToggleIconButton
    key={value}
    icon={`Textalign${value === 'left' ? 'Left' : value === 'center' ? 'Center' : 'Right'}`}
    selected={alignment === value}
    onPress={() => setAlignment(value)}
  />
))}

Disabled

<ToggleIconButton icon="TextBold" selected={bold} />

Comparison

	`IconButton`	`ToggleIconButton`
Purpose	Fires an action	Reflects and flips a state
Size	`height.medium`	`height.small`
Color	Fixed, via `type`	Primary when `selected`, quiet otherwise

Basic Usage​

Props​

Examples​

A row of toggles​

Single-select group​

Disabled​

Comparison​