Toggle
A two-state button that toggles between on and off.
Toggle
use leptos::prelude::*; use singlestage::*; #[component] pub fn ToggleExample() -> impl IntoView { let pressed = RwSignal::new(false); view! { <Toggle aria_label="Toggle bookmark" pressed size="sm" variant="outline"> <Show when=move || pressed.get() fallback=move || view! { {icon!(icondata::LuBookmark)} } > {icon!(icondata::LuBookmark, class="fill-(--foreground)")} </Show> Bookmark </Toggle> } }
Outline
Use the outline variant for an outline style.
use leptos::prelude::*; use singlestage::*; #[component] pub fn ToggleOutlineExample() -> impl IntoView { view! { <div class="flex flex-wrap items-center gap-2"> <Toggle variant="outline" aria_label="Toggle italic"> {icon!(icondata::LuItalic)} <span>"Italic"</span> </Toggle> <Toggle variant="outline" aria_label="Toggle bold"> {icon!(icondata::LuBold)} <span>"Bold"</span> </Toggle> </div> } }
With Text
use icondata::LuItalic; use leptos::prelude::*; use singlestage::*; #[component] pub fn ToggleWithTextExample() -> impl IntoView { view! { <Toggle aria_label="Toggle italic">{icon!(LuItalic)} <span>"Italic"</span></Toggle> } }
Size
Use the size prop to change the size of the toggle.
use leptos::prelude::*; use singlestage::*; #[component] pub fn ToggleSizeExample() -> impl IntoView { view! { <div class="flex flex-wrap items-center gap-2"> <Toggle variant="outline" aria_label="Toggle small" size="sm"> "Small" </Toggle> <Toggle variant="outline" aria_label="Toggle default" size="default"> "Default" </Toggle> <Toggle variant="outline" aria_label="Toggle large" size="lg"> "Large" </Toggle> </div> } }
Disabled
use leptos::prelude::*; use singlestage::*; #[component] pub fn ToggleDisabledExample() -> impl IntoView { view! { <div class="flex flex-wrap items-center gap-2"> <Toggle aria_label="Toggle disabled" disabled=true> "Disabled" </Toggle> <Toggle variant="outline" aria_label="Toggle disabled outline" disabled=true> "Disabled" </Toggle> </div> } }
Anatomy
Import all parts and piece them together.
use leptos::prelude::*; use singlestage::*; #[component] pub fn ToggleAnatomy() -> impl IntoView { view! { <Toggle /> } }
API Reference
Toggle
A control that toggles between an on and off state.
| Name | Type | Default | Description |
|---|---|---|---|
| pressed | bool | false | A reactive signal coupled to the toggle's pressed state. |
| size | String | "" | Specify the size to render the toggle. |
| variant | String | "" | Specify the style of toggle to render. |