UI Skillbook
2

Toggle

One button that stays pressed or unpressed, for on/off tool states like bold or bookmark.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

Run npx uiskillbook get siteplane-toggle and follow the Siteplane Toggle skill it prints for this task.

Paste this into your agent.

Toggle is a standalone pressed-state control for editors, toolbars and cards, where the button shows whether something is on. It fits formatting tools, favourites and view options that take effect on press.

Install

bashnpx shadcn@4.18.0 add @siteplane/toggle

Import it from @/siteplane/components/toggle. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

  • vs Switch: Pick Switch for a saved on/off setting, above all one that submits with a form.
  • vs Checkbox: Pick Checkbox when the choice is a form value or an agreement. Toggle holds a tool state.
  • vs Toggle Group: Pick Toggle Group when several related toggles belong together, as one-of-many or any-of-many.

Rules

  • Leave the label and icon fixed when the state flips. Assistive tech already reports whether it is pressed.
  • An icon-only toggle needs padding="icon" to stay square and a fixed aria-label.
  • Control the state with pressed and onPressedChange when the app already knows it, such as the current text formatting.
  • Toggle submits no form value. Serialize the state yourself, or use Checkbox or Switch.
  • Save lift for reactions like a like or favourite. Ordinary tool toggles go without it.

Reference

  • Toggle docs, with every prop, part and example (Markdown)
  • Siteplane UI 1.8.1, Actions. Read the installed source under src/siteplane before relying on an API.

Add to your agent

Print this skill from the terminal, or connect the whole catalog over MCP. Setup guides

CLI

npx uiskillbook get siteplane-toggle

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

12 Principles of Animationby raphaelsalaja

Apply Disney's 12 animation principles to web interfaces to make motion feel natural, organic, and human.

MotionExternalGitHub stars: 42

Accessible Focus Statesby UI Skillbook

Keep a visible, high-contrast focus indicator on every interactive element, without a generic browser outline or none at all.

Accessibility

Adaptby pbakaus

Adapt designs across breakpoints, device contexts, and platform constraints with responsive interaction quality.

InteractionExternalGitHub stars: 95.1K

Animateby emilkowalski

Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts, how it exits. Writes the implementation. Use when asked to animate something, add motion, make a component feel alive, or build a transition. For critiquing existing motion use review-animations; for auditing a whole codebase use improve-animations.

MotionExternalGitHub stars: 51.4K

Back to Siteplane UI