Toggle

A two-state button that can be pressed or unpressed. Built on Base UI Toggle. Compose with Button or IconButton for styling.

API Reference

Prop	Type	Default
pressed	boolean	—
defaultPressed	boolean	false
onPressedChange	(pressed: boolean) => void	—
disabled	boolean	false
render	(props, state) => ReactElement	—
aria-label	string	—

Preview

// With IconButton
<Toggle
  aria-label="Favorite"
  render={(props, state) => (
    <IconButton
      variant={state.pressed ? "solid" : "ghost"}
      color="primary"
      {...props}
    >
      <FavoriteIcon />
    </IconButton>
  )}
/>

// With Button
<Toggle
  aria-label="Bold"
  render={(props, state) => (
    <Button
      variant={state.pressed ? "solid" : "outlined"}
      color="root"
      size="sm"
      {...props}
    >
      Bold
    </Button>
  )}
/>

Usage Notes

This is a thin wrapper around Base UI Toggle. Refer to their docs for the full API.
Toggle is headless — use the render prop to compose with Button or IconButton for styling.

Basic Usage

import { Toggle, IconButton, Button } from "@/bonk/ui";
import { FavoriteIcon } from "@/bonk/ui/icons";

<Toggle
  aria-label="Favorite"
  render={(props, state) => (
    <IconButton variant={state.pressed ? "solid" : "ghost"} {...props}>
      <FavoriteIcon />
    </IconButton>
  )}
/>

Source

src/bonk/ui/Toggle.tsx

"use client";

import { Toggle as BaseToggle } from "@base-ui/react/toggle";
import type { Toggle as BaseToggleType } from "@base-ui/react/toggle";

export type ToggleProps = BaseToggleType.Props<string>;

export function Toggle(props: ToggleProps) {
  return <BaseToggle {...props} />;
}