ToggleButton

The ToggleButton toggles between pressed and unpressed states.

// apps/docs/src/components/examples/toggle-button/default/react.tsx
import { ToggleButton } from '@cloudvoyant/helical-react';

export default function ReactToggleButtonDefault() {
  return <ToggleButton>Bold</ToggleButton>;
}

<!-- apps/docs/src/components/examples/toggle-button/default/svelte.svelte -->
<script lang="ts">
  import { ToggleButton } from '@cloudvoyant/helical-svelte';
</script>

<ToggleButton>Bold</ToggleButton>

Examples

Icon

// apps/docs/src/components/examples/toggle-button/icon/react.tsx
import { ToggleButton } from '@cloudvoyant/helical-react';
import { Bold, Italic, Underline } from 'lucide-react';

export default function ReactToggleButtonIcon() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <ToggleButton aria-label="Toggle bold">
        <Bold className="size-4" />
      </ToggleButton>
      <ToggleButton aria-label="Toggle italic">
        <Italic className="size-4" />
      </ToggleButton>
      <ToggleButton aria-label="Toggle underline">
        <Underline className="size-4" />
      </ToggleButton>
    </div>
  );
}

<!-- apps/docs/src/components/examples/toggle-button/icon/svelte.svelte -->
<script lang="ts">
  import { ToggleButton } from '@cloudvoyant/helical-svelte';
  import { Bold, Italic, Underline } from 'lucide-svelte';
</script>

<div class="flex flex-wrap items-center gap-3">
  <ToggleButton aria-label="Toggle bold">
    <Bold class="size-4" />
  </ToggleButton>
  <ToggleButton aria-label="Toggle italic">
    <Italic class="size-4" />
  </ToggleButton>
  <ToggleButton aria-label="Toggle underline">
    <Underline class="size-4" />
  </ToggleButton>
</div>

Indicator

// apps/docs/src/components/examples/toggle-button/indicator/react.tsx
import { ToggleButton, ToggleButtonIndicator } from '@cloudvoyant/helical-react';
import { Bookmark } from 'lucide-react';

export default function ReactToggleButtonIndicator() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <ToggleButton aria-label="Toggle bookmark" defaultPressed>
        <ToggleButtonIndicator fallback={<Bookmark className="size-4" />}>
          <Bookmark className="size-4" fill="currentColor" />
        </ToggleButtonIndicator>
      </ToggleButton>
    </div>
  );
}

<!-- apps/docs/src/components/examples/toggle-button/indicator/svelte.svelte -->
<script lang="ts">
  import { ToggleButton, ToggleButtonIndicator } from '@cloudvoyant/helical-svelte';
  import { Bookmark } from 'lucide-svelte';
</script>

<div class="flex flex-wrap items-center gap-3">
  <ToggleButton aria-label="Toggle bookmark" defaultPressed>
    <ToggleButtonIndicator>
      <Bookmark class="size-4" fill="currentColor" />
      {#snippet fallback()}
        <Bookmark class="size-4" />
      {/snippet}
    </ToggleButtonIndicator>
  </ToggleButton>
</div>

Outline

// apps/docs/src/components/examples/toggle-button/outline/react.tsx
import { ToggleButton } from '@cloudvoyant/helical-react';

export default function ReactToggleButtonOutline() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <ToggleButton variant="outline">Bold</ToggleButton>
      <ToggleButton variant="outline">Italic</ToggleButton>
      <ToggleButton variant="outline">Underline</ToggleButton>
    </div>
  );
}

<!-- apps/docs/src/components/examples/toggle-button/outline/svelte.svelte -->
<script lang="ts">
  import { ToggleButton } from '@cloudvoyant/helical-svelte';
</script>

<div class="flex flex-wrap items-center gap-3">
  <ToggleButton variant="outline">Bold</ToggleButton>
  <ToggleButton variant="outline">Italic</ToggleButton>
  <ToggleButton variant="outline">Underline</ToggleButton>
</div>

API Reference

The React and Svelte components accept variant, size, and className/class, plus standard button attributes and all Ark toggle ToggleRoot props.

ToggleButton

Props

Prop	Type	Default	Description
`variant`	`'default' \| 'outline'`	`'default'`	Visual emphasis.
`size`	`'default' \| 'sm' \| 'lg'`	`'default'`	Height of the button.
`pressed`	`boolean`	—	Controlled pressed state.
`defaultPressed`	`boolean`	`false`	Initial state when uncontrolled.
`onPressedChange`	`(details: PressedChangeDetails) => void`	—	Fires when pressed state changes.
`className` / `class`	`string`	—	Merged via `cn` with the variant classes.

ToggleButtonIndicator

Props

Accepts all Ark ToggleIndicator props. Renders its children only when the button is pressed; pass the fallback prop to render content in the unpressed state.

Accessibility

Follows the Button WAI-ARIA pattern. The underlying Ark toggle sets aria-pressed automatically and supports keyboard activation with Space and Enter.