Toggle

A two-state button that can be either on or off.

Default

Click to toggle between on and off states.

Pressed State

Toggle initially in pressed (on) state.

Outline Variant

Toggle with outline styling.

Sizes

Toggle comes in three sizes: sm, default, and lg.

With Text

Toggle with text content.

Disabled

Disabled toggles cannot be interacted with.

Accessibility

  • Uses aria-pressed to indicate the toggle state
  • Supports Enter and Space key to toggle
  • Disabled state prevents interaction
  • Use aria-label when toggle contains only an icon
Open Markdown
FreeToggle

Pressed/unpressed control state.

Install with the Proa CLI
proa ui add toggle

Installs the reviewed component source, dependencies, shared support files, and required legal notices.

CLI and registry setup
recipe.rs
// SPDX-FileCopyrightText: 2026 Proa Labs, Inc.
// SPDX-License-Identifier: (MIT OR Apache-2.0) AND MIT

//! Toggle recipe - styling system for toggle component
//!
//! Provides Tailwind classes for toggle styling following shadcn patterns.

use crate::tw_join;
use proa_core::shared::attr_value::AttrValue;
use proa_core::{DataLoader, WebContext, WriteBuf, WriteError};

/// Toggle variant
#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash, Default, proa_macros::ProaVariant)]
#[variant(name = "variant")]
pub enum ToggleVariant {
    /// Default transparent toggle
    #[default]
    Default,
    /// Outlined toggle with border
    Outline,
}

Search

Type at least 2 characters

Customize

Make it yours

Palette

Radius

Overview
Components
Settings

Build your own

Themed Proa UI surface

Preview
Components52
RecipesTyped
customer-portal