Toggle

A two-state button that toggles between on and off.

Toggle

use icondata::LuBold;
use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn ToggleExample() -> impl IntoView {
    view! { <Toggle aria_label="Toggle italic">{icon!(LuBold)}</Toggle> }
}

Outline

use icondata::LuItalic;
use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn ToggleOutlineExample() -> impl IntoView {
    view! {
        <Toggle variant="outline" aria_label="Toggle italic">
            {icon!(LuItalic)}
        </Toggle>
    }
}

With Text

use icondata::LuItalic;
use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn ToggleWithTextExample() -> impl IntoView {
    view! { <Toggle aria_label="Toggle italic">{icon!(LuItalic)} "Italic"</Toggle> }
}

Small

use icondata::LuItalic;
use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn ToggleSmallExample() -> impl IntoView {
    view! {
        <Toggle size="sm" aria_label="Toggle italic">
            {icon!(LuItalic)}
        </Toggle>
    }
}

Large

use icondata::LuItalic;
use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn ToggleLargeExample() -> impl IntoView {
    view! {
        <Toggle size="lg" aria_label="Toggle italic">
            {icon!(LuItalic)}
        </Toggle>
    }
}

Disabled

use icondata::LuUnderline;
use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn ToggleDisabledExample() -> impl IntoView {
    view! {
        <Toggle disabled=true aria_label="Toggle italic">
            {icon!(LuUnderline)}
        </Toggle>
    }
}

Anatomy

Import all parts and piece them together.

use leptos::prelude::*;
use singlestage::toggle::Toggle;

#[component]
pub fn ToggleAnatomy() -> impl IntoView {
    view! { <Toggle /> }
}

API Reference

Toggle

A control that toggles between an on and off state.

Custom Attributes
Name	Type	Default	Description
size	String	""	Specify the size to render the toggle.
pressed	Reactive<bool>	false	A reactive signal coupled to the toggle's pressed state.
variant	String	""	Specify the style of toggle to render.

Implements global and button attributes.