ToggleButton

Pressable toggle that stays selected until pressed again. Use for formatting tools, filters, and other on/off actions that are not mutually exclusive (use SegmentedControl for exclusive choices).

Examples

Default

Uncontrolled toggles start unselected; press to flip aria-pressed.

import { ToggleButton } from '@var-ui/react';

<ToggleButton>Bold</ToggleButton>

Pressed state

Use defaultSelected for an initially pressed uncontrolled toggle, or isSelected + onChange for controlled selection.

import { HStack, ToggleButton } from '@var-ui/react';
import { useState } from 'react';

const [italic, setItalic] = useState(true);

<HStack gap="sm">
  <ToggleButton defaultSelected>Bold</ToggleButton>
  <ToggleButton isSelected={italic} onChange={setItalic}>
    Italic
  </ToggleButton>
  <ToggleButton>Underline</ToggleButton>
</HStack>

Props

Accessibility

Built on React Aria ToggleButton. Selection is exposed as aria-pressed. Prefer visible text (or pair an icon with aria-label) so the pressed state is meaningful to screen reader users.