Toggle

Toggle button with a springy response. Pro · Animated components › Buttons

A button that stays on or off (aria-pressed): a tool or mode such as Bold, Favourite or Compact view. For a setting that applies at once use Switch; for one choice out of several use SegmentedControl.

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add toggle

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { Toggle } from 'valyro-ui-pro';

Props

Prop	Type	Default
`pressed`	`boolean`		On (aria-pressed) state.
`defaultPressed`	`boolean`	`false`	Initial `pressed` when uncontrolled.
`onPressedChange`	`(pressed: boolean) => void`		Called with the new `pressed` when it changes.
`tone`	`'neutral' \| 'accent'`	`'neutral'`	Colour of the on state: a neutral fill or the accent tint.
`fillIcon`	`boolean`	`false`	Fills an outline icon (a star, a heart) while on.
`animation`	`'spring' \| 'none'`	`'spring'`	`spring` (default): the button presses in while held and springs back with a bounce, and the icon pops in when turned on (and settles when turned off). `none`: no motion.
`variant`	`'primary' \| 'secondary' \| 'ghost' \| 'accent' \| 'danger' \| 'link'`	`'ghost'`	Solid `primary`/`accent`/`danger` fill, outlined `secondary`, transparent `ghost`, or unpadded text `link`.
`size`	`'sm' \| 'md' \| 'lg'`		Control height, padding and text size.
`leftIcon`	`ReactNode`		Icon or element before the label.
`rightIcon`	`ReactNode`		Icon or element after the label.
`fullWidth`	`boolean`		Stretch to the full width of the container.
`pill`	`boolean`		Fully rounded ends, regardless of theme.
`hoverScale`	`number`		Scale under a hovering mouse, e.g. `1.05`; it springs back with a slight bounce. Off by default (the theme's own hover). Skipped on touch and under reduced motion.
`tapScale`	`number`		Scale while pressed, e.g. `0.95`, instead of the theme's press transform; springs back on release.

Related components

Flip Button — Two-sided button that flips on a spring
Liquid Button — Button that fills with “liquid” on hover
Theme Toggler — Light/dark switch with a View Transitions reveal
GitHub Stars Button — Repository link with a rolling star count
Share Button — Button that fans out social icons
Code Tabs — Code variants in tabs: npm, pnpm, bun, with copy
Number Wheel — Number on a spinning wheel with neighboring values
Pin List — Pinnable list: items glide between groups
Notification Stack — Notification stack that expands into a list
Todo List — Checklist with a wavy strike-through on done items
Presence Avatars — Who’s online: avatars rearrange as status changes
Radial Menu — Ring-shaped context menu on right-click

Previous: Patch Notes · Next: Flip Button · All Animated components