Yugen UI

ToggleButton

ToggleButton has an on and an off state and turns an option on or off immediately.

Same appearance and size options as Button. When on, secondary gets a darker background, primary switches to a brand shade, outline gets a thicker border, and subtle / transparent color the icon and text brand. The icon can change with the state (icon → checkedIcon). Screen readers get the state from aria-pressed.

Import

Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.

TSX
// npm install yugen-uiimport { ToggleButton } from "yugen-ui";

Variants

Each tile is a standalone example: hover to copy, or press Code to see the source.

Appearance

The buttons below start in the on state. Click them to compare with the off state.

Mic on

Controlled & icon swap

checked / onCheckedChange; the aria-label stays the same and aria-pressed conveys the state.

Size & disabled

small, medium (default), large.

Usage

Do
  • Use it for options that take effect immediately (pin, mute, bold).
  • Switch to the Filled icon when on, for a stronger visual cue.
  • Keep the label fixed and let aria-pressed describe the state.
Don't
  • Don't change the label with the state (“On” ↔ “Off”). It confuses screen reader users.
  • Don't use it for settings that need saving or confirmation. Use Switch or Checkbox in a form.

Props

Prop · TypeDefaultDescription
appearance"secondary" | "primary" | "outline" | "subtle" | "transparent"Default: "secondary"Display style.
size"small" | "medium" | "large"Default: "medium"Height 24 / 32 / 40px.
shape"rounded" | "circular" | "square"Default: "rounded"Corner rounding.
checked / defaultCheckedbooleanDefault: —On state (controlled / uncontrolled).
onCheckedChange(checked: boolean) => voidDefault: —Called when the button is clicked.
icon / checkedIconReactNodeDefault: —Icon when off / when on.
iconPosition"before" | "after"Default: "before"Icon position.
disabledbooleanDefault: —Disables the button.