Vibe UI
Initializing Vibe UI System...
Vibe UI

Toggle

A two-state button component that can be pressed or active, designed to capture boolean actions.

Toggle

A two-state button component that can be pressed or active, designed to capture boolean actions.

Preview: Toggle Heart Active

Active Like Option

Press to change liked heart status

Installation

pnpm dlx vibe-ui-kit@latest add toggle

Icon-Only Toggles (Showcase)

Compare 8 distinct interactive icon-only toggles (like Heart, Bookmark, Mute, Pin, Star, Visibility, Lock, Power) rendered inline:

Standard Variations

Theme Presets Comparison

Format editor toolbar

Text Formatting

Toolbar select items matching actions

Audio volume controller

Sound Control

Mute and unmute audio feeds

Document saver bookmark

Save Progress

Bookmark directory logs

Active pinned folder

Pin Topic

Lock thread panel item to the top

Cyber terminal override

Cyberpunk Presets

Glitch scanline mode selector

Grid vs List swapper

Grid vs List

Control product display patterns

Retro Neobrutalist active options

Retro Options

Thick outline flat option panel

Favorite star selector

Star Favorite

Mark components directory as starred

Availability profile toggle

Developer Status

Show active availability settings

Contributors

JS
Jenish Sabhadiya

Theme Customizer

8px
@theme {
  --radius: 0.5rem;
  --glass-blur: 8px;
}
Changes apply instantly to this documentation workspace.
Toggle | Vibe UI